Article Categories
- All Categories
-
Data Structure
-
Networking
-
RDBMS
-
Operating System
-
Java
-
MS Excel
-
iOS
-
HTML
-
CSS
-
Android
-
Python
-
C Programming
-
C++
-
C#
-
MongoDB
-
MySQL
-
Javascript
-
PHP
-
Economics & Finance
Add transparency to the background with CSS
The CSS opacity property is used to add transparency to the background of an element. The property accepts values from 0 (completely transparent) to 1 (completely opaque), allowing you to create various levels of transparency effects.
Syntax
selector {
opacity: value;
}
Possible Values
| Value | Description |
|---|---|
0 |
Completely transparent (invisible) |
0.1 - 0.9 |
Partially transparent with varying degrees |
1 |
Completely opaque (default) |
Example: Different Opacity Levels
The following example demonstrates different transparency levels using the opacity property −
<!DOCTYPE html>
<html>
<head>
<style>
div {
background-color: #808000;
padding: 20px;
margin: 10px 0;
color: white;
font-weight: bold;
}
div.low-opacity {
opacity: 0.2;
}
div.medium-opacity {
opacity: 0.5;
}
div.full-opacity {
opacity: 1;
}
</style>
</head>
<body>
<h1>Background Transparency Example</h1>
<p>Check transparency in the sections below:</p>
<div class="low-opacity">
<p>Opacity: 0.2 (20% visible)</p>
</div>
<div class="medium-opacity">
<p>Opacity: 0.5 (50% visible)</p>
</div>
<div class="full-opacity">
<p>Opacity: 1.0 (100% visible)</p>
</div>
</body>
</html>
Three olive-colored boxes appear with varying transparency levels. The first box is very transparent (20% visible), the second is moderately transparent (50% visible), and the third is fully opaque with no transparency.
Important Note
The opacity property affects the entire element including its content (text, images, etc.), not just the background. If you need to make only the background transparent while keeping content fully visible, consider using rgba() color values instead.
Conclusion
The opacity property provides an easy way to create transparency effects. Values range from 0 (invisible) to 1 (fully visible), allowing precise control over element transparency.
349 Views
