CSS Opacity
BLUF: Styling is what brings the web to life, and mastering CSS Opacity is key to creating beautiful, responsive interfaces. This tutorial breaks down the concepts and syntax you need to succeed with CSS.
Visual Design Hack: CSS Opacity
CSS is all about presentation. Discover how CSS Opacity works to transform plain HTML into a premium user experience in the guide below.
The CSS opacity attribute is utilized to define the level of transparency of a particular element. Put simply, it determines the clearness of the image.
In technical jargon, Opacity is characterized as the extent to which light can pass through an object.
How to apply CSS opacity setting
The opacity setting is uniformly implemented on the entire object, with the opacity value specified in terms of a digital value less than 1. Lower opacity values result in higher transparency. Opacity is not passed down through inheritance.
CSS Opacity Example: transparent image
Let's explore a basic demonstration of CSS opacity to achieve image transparency.
Example
<!DOCTYPE html>
<html>
<head>
<style>
img.trans {
opacity: 0.4;
filter: alpha(opacity=40); /* For IE8 and earlier */
}
</style>
</head>
<body>
<p>Normal Image</p>
<img src="https://placehold.co/400x300/1abc9c/ffffff?text=Sample+Image" alt="normal rose">
<p>Transparent Image</p>
<img class="trans" src="https://placehold.co/400x300/1abc9c/ffffff?text=Sample+Image" alt="transparent rose">
</body>
</html>
Output:
Normal Image
Transparent Image
