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:
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