How to use Opacity Property In CSS
The Opacity Property in CSS sets the transparency level of an element and its contents. Accepting values between 0 (fully transparent) and 1 (fully opaque), affects the entire element, including its children, making it a simple and effective way to control transparency in web design.
Syntax:
div {
opacity: 0.5;
}
Example: The opacity property in the CSS style of the “.element” class is set to 0.3, making the background image semi-transparent. This adjusts the visibility of the background while maintaining text readability.
HTML
<!DOCTYPE html><html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Opacity of Background Image</title> <style> .element { width: 300px; height: 200px; background-image: url('https://media.w3wiki.org/wp-content/uploads/20210313130410/exbg.png'); opacity: 0.3; /* Adjust opacity level */ color: white; text-align: center; line-height: 200px; } </style> </head> <body> <h2 style="color: green;"> w3wiki</h2> <div class="element"> Background Image with Opacity </div> </body></html> |
Output:
Using Opacity Property
How to set the opacity of background image in CSS ?
Setting the opacity of a background image in CSS involves using the background-image property along with the opacity property. By adjusting the opacity, you control the transparency of the background image, allowing elements behind it to partially show through, creating a visually layered effect.
We are using the following approaches to setting the opacity of the background image in CSS:
Table of Content
- Using Opacity Property
- Using Pseudo-elements
Contact Us