The CSS opacity property is used to specify the transparency level of an element. It controls how much light passes through the element, affecting its clarity and visibility.
Uniform Application: Opacity is applied uniformly across the entire element, including its content (text, images, etc.).
Opacity Value: Defined as a decimal value between 0 and 1, where:
• 0 represents full transparency (completely invisible).
• 1 represents full opacity (completely opaque).
• Values between 0 and 1 represent varying levels of transparency.
Non-Inherited: The opacity property is not inherited by child elements, but it affects the entire element including all its content.
Impact on Child Elements: Applying opacity to a parent element will make all child elements equally transparent.
<!DOCTYPE html>
<html>
<head>
<title>CSS Opacity Example</title>
<style>
.opaque {
opacity: 1; <!-- Fully opaque -->
background-color: lightblue;
padding: 20px;
margin-bottom: 10px;
}
.semi-transparent {
opacity: 0.5; <!-- 50% opacity -->
background-color: lightgreen;
padding: 20px;
margin-bottom: 10px;
}
.transparent {
opacity: 0.1; <!-- 10% opacity -->
background-color: lightcoral;
padding: 20px;
}
</style>
</head>
<body>
<div class="opaque">
This element is fully opaque (opacity: 1).
</div>
<div class="semi-transparent">
This element is semi-transparent (opacity: 0.5).
</div>
<div class="transparent">
This element is mostly transparent (opacity: 0.1).
</div>
</body>
</html>