Home > Article > Web Front-end > Set opacity only to background color, not text opacity in CSS
Set opacity only to background color, not text opacity in CSS
- 王林forward
- 2023-09-11 20:33:051153browse
In CSS, we can set the background of a specific HTML element using the CSS "background" property. Sometimes, we may need to reduce the opacity of a background color without affecting the content of the HTML element.
We can reduce the opacity of the background color by decreasing the value of the alpha variable while assigning the color value to the "Background Color" property.
grammar
Users can follow the following syntax to set opacity only to the background color and not the text in CSS.
background: rgba(255, 0, 0, opacity); or background-color: hsla(0, 100%, 30%, opacity);
Users can set the background color using 'rgba' or 'hsla'; here 'a' represents alpha opacity, whose value is between 0 and 1.
Example 1
In the example below, we create an HTML div element and set the background color using the "background" attribute. We use the "rgba" value to set the background color. We set the "red" color to the background with an opacity of "0.1", which the user can observe in the output.
<html>
<head>
<style>
.div {
background: rgba(255, 0, 0, 0.1);
height: 100px;
width: 500px;
}
</style>
</head>
<body>
<h3>Setting up the background opacity without affecting the content of the div element</h3>
<div class = "div">
Hello! How are you?
</div>
</body>
</html>
Example 2
In the example below, we use the "background-color" CSS property to set the background of an HTML div element. Additionally, we use the "hsla" value for the background and the "0.2" alpha opacity value.
Users can increase or decrease the opacity value between 0 and 1 and observe the background color change.
<html>
<head>
<style>
.div {
background-color: hsla(0, 100%, 30%, 0.2);
height: 100px;
width: 500px;
}
</style>
</head>
<body>
<h3>Setting up the background opacity using the background-color: hsla CSS property without affecting the content of the div element </h3>
<div class = "div">
This is a content of the div element.
</div>
</body>
</html>
Example 3
We can separate the background div from the content div and set a background color with a lower opacity for the div element.
Here, we have a parent div. In the parent div we have the background and content div. The background and content divs have the same dimensions as the parent div. We can set the z-index attribute of both div elements to display the content div above the background div.
Afterwards, we can use the CSS "opacity" property to lower the opacity of just the background div. This way we can place the background div below the content div and play with the opacity of the background div.
<html>
<head>
<style>
#parent {
width: 500px;
height: 150px;
position: relative;
}
#content {
position: absolute;
width: 100%;
height: 100%;
color: white;
font-size: 1.2rem;
top: 0;
left: 0;
}
#background {
background: blue;
filter: alpha(opacity=30);
position: absolute;
height: 100%;
width: 100%;
top: 0;
left: 0;
}
</style>
</head>
<body>
<h3>Setting up the background opacity using the filter: alpha(opacity = value) CSS property without affecting the content of the div element </h3>
<div id = "parent">
<div id = "background"></div>
<div id = "content"> This is the content of the div element.</div>
</div>
</body>
</html>
Users learned to set the opacity of a background color without affecting the opacity of the text or div content. Users can reduce the opacity of a color when using "rgba" or "hsla" values. If the user has an image or anything else as a background, they can create separate divs for the background and content and lower the opacity of the background div.
The above is the detailed content of Set opacity only to background color, not text opacity in CSS. For more information, please follow other related articles on the PHP Chinese website!