CSS Opacity
CSS opacity is a property that controls the transparency of an element. It allows you to make an element partially or fully transparent so you can see through it to the elements behind it.
How to Use the Opacity Property
The opacity property in CSS takes a value between 0 (completely transparent) and 1 (completely opaque). The closer the value is to 0, the more transparent the element will be.
Example:
If you have a background image or color behind the <div>, you’ll be able to see that background through the semi-transparent <div>. Similarly, if there are other elements behind this <div>, they will also be partially visible.
Output:
In this example:
• Background: The body has a light gray background.
• Transparent <div>: The .transparent-div has opacity: 0.5, making it 50% transparent.
• Effect: The blue background of the <div> is semi-transparent, so you can see the light gray background and the text behind it through the <div>. The text inside the <div> is also semi-transparent.
Understanding Opacity Values
• opacity: 1;
The element is fully opaque (not transparent at all).
• opacity: 0.75;
The element is 75% opaque and 25% transparent.
• opacity: 0.5;
The element is 50% opaque and 50% transparent.
• opacity: 0.25;
The element is 25% opaque and 75% transparent.
• opacity: 0;
The element is fully transparent (invisible).
Example:
<head>
<style>
div{ background-color: blue; color: white; padding: 10px; margin: 5px;}
.opacity-1 { opacity: 1; }
.opacity-075 {opacity: 0.75; }
.opacity-05 { opacity: 0.5; }
.opacity-025 { opacity: 0.25; }
.opacity-0 { opacity: 0; }
</style>
</head>
<body>
<div class=”opacity-1″>Opacity 1 (Fully Opaque)</div>
<div class=”opacity-075″>Opacity 0.75</div>
<div class=”opacity-05″>Opacity 0.5</div>
<div class=”opacity-025″>Opacity 0.25</div>
<div class=”opacity-0″>Opacity 0 (Fully Transparent)</div>
</body>
Output:
In this example:
• The opacity property controls the transparency of the elements.
• Higher opacity values make elements more visible, while lower values make them more transparent.
• Even with opacity set to 0, the element remains in the document flow, taking up space but being invisible.
Opacity and Child Elements
When you apply opacity to a parent element, it also affects all of its child elements. This means that if you set a div to have opacity: 0.5;, everything inside that div will also be 50% transparent.
Example:
<head>
<style>
.parent-opacity {
opacity: 0.5;
background-color: darkred;
color: white;
padding: 20px;
margin: 10px;
}
.child {
background-color: lightcoral;
padding: 10px;
margin: 10px 0;
}
</style>
</head>
<body>
<div class=”parent-opacity”>
Parent with 50% Opacity
<div class=”child”>
Child element inside parent
</div>
</div>
</body>
Output:
In this example:
• The parent element has an opacity of 0.5, which makes the entire parent element, including its contents and any nested child elements, semi-transparent.
• Even though the child <div> has its background color and styling, the opacity of the parent element affects its visibility, making it appear as if the child element is also semi-transparent. This behavior is due to how CSS opacity affects all descendant elements.
Making Only the Background Transparent
If you want to make only the background of an element transparent without affecting the text or other content inside, you should use the rgba() color function instead of the opacity property.
Example:
<head>
<style>
.transparent-bg {
background-color: rgba(0, 0, 255, 0.5); /* 50% transparency */
color: white;
padding: 20px;
margin: 10px;
}
.child {
background-color: lightblue;
padding: 10px;
margin: 10px 0;
}
</style>
</head>
<body>
<div class=”transparent-bg”>
Background is 50% transparent
<div class=”child”>
Child element with full opacity
</div>
</div>
</body>
Output:
In this example:
• The rgba background color with an alpha value of 0.5 makes the parent element’s background semi-transparent, but it does not affect the opacity of the child element’s content.
• The child <div> maintains full opacity even though it is inside a parent element with a semi-transparent background.
• This is a useful technique when you want a background to be partially see-through but want the text or other content inside to remain fully visible.
Conclusion
CSS opacity is a simple yet powerful property that allows you to control the transparency of elements on your web page. It can be used creatively to layer content, create visual effects, or highlight certain parts of a page.
Course Video
YouTube Reference :
Practice Scenarios
1. Basic Opacity on an Image
Scenario: Apply opacity to an image to make it semi-transparent.
Objective: Make an image 50% transparent.
Output:
2. Opacity on a Text Block
Scenario: Apply opacity to a paragraph to make the text slightly transparent.
Objective: Make a paragraph 70% opaque.
Output:
3. Opacity on a Background with Nested Elements
Scenario: Apply opacity to a div with background color without affecting the nested elements.
Objective: Make a background color semi-transparent but keep the text fully opaque.
Output:
4. Hover Effect with Opacity
Scenario: Change the opacity of an element when a user hovers over it.
Objective: Make a button fully opaque when hovered over, and 50% transparent otherwise.
Output:
5. Layered Elements with Different Opacity Levels
Scenario: Create a layered effect with multiple elements having different opacity levels.
Objective: Position a semi-transparent text over a fully opaque background image.
Output:
