极客笔记CSS 将透明度仅设置的背景颜色上，而不影响文本
在CSS中，我们可以使用CSS的’background’属性为特定的HTML元素设置背景。有时，我们可能需要减少背景颜色的透明度，而不影响HTML元素的内容。
我们可以通过降低alpha变量的值来减少背景颜色的透明度，同时将颜色值分配给’background color’属性。
语法
用户可以按照下面的语法来设置透明度仅在CSS中的背景颜色上，而不是文本。
background: rgba(255, 0, 0, opacity);
or
background-color: hsla(0, 100%, 30%, opacity);
用户可以使用’rgba’或’hsla’设置背景颜色；这里的’a’表示透明度，取值范围为0到1。
示例1
在下面的示例中，我们创建了HTML的div元素，并使用’background’属性设置了背景颜色。我们使用了’rgba’值来设置背景颜色。我们将背景颜色设置为’红色’，透明度为’0.1’，用户可以在输出中观察到。
<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>
示例2
在下面的示例中，我们使用了“background-color”CSS属性来设置HTML div元素的背景。此外，我们还使用了“hsla”值作为带有“0.2” alpha不透明度值的背景。
用户可以增加或减少不透明度值在0到1之间，并观察背景颜色的变化。
<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>
示例3
我们可以将背景div与内容div分开，并为具有较低透明度的div元素设置背景颜色。
在这里，我们有一个父div。在父div中，我们有背景和内容div。背景和内容div的尺寸与父div相同。我们可以为两个div元素设置z-index属性，以使内容div显示在背景div上方。
之后，我们可以使用CSS的‘opacity’属性仅降低背景div的不透明度。通过这种方式，我们可以将背景div放在内容div下方，并调整背景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>
用户学会了在不影响文本或div内容不透明度的情况下，设置背景颜色的透明度。用户可以在使用“rgba”或“hsla”值时降低颜色的透明度。如果用户有一个图像或其他任何东西作为背景，他们可以为背景和内容创建一个单独的div，并降低背景div的透明度。