【css笔记】 设置背景透明度但不影响内部元素
已被阅读 1747 次 | 文章分类:css | 2022-05-21 00:16
只设置DOM原色的背景或者背景图片的透明度，而不影响内部元素的透明值；
1 一般透明度设置方式
设置DOM元素背景透明度，常用opacity属性，如下效果
<html>
<head>
<style>
.image{
width: 600px;
height: 400px;
position: relative;
background:url('./img_lights.jpg');
opacity: 0.5;
text-align: center;
}
</style>
</head>
<body>
<div class="image">
<h1>极光</h1>
</div>
</body>
</html>
结果是会让整个DOM元素内部所有元素透明度变为0.5;
如何只背景或者背景图片得透明度，不让DOM元素内容受影响呢
2 只改变背景透明度
将元素背景相关的设置用伪元素::after去定义，然后设置伪元素的透明度即可
如下设置：
.image{
width: 600px;
height: 400px;
position: relative;
text-align: center;
}
.image::after{
content: "";
background:url('./img_lights.jpg');
opacity: 0.5;
position: absolute;
left: 0;
top: 0;
right: 0;
bottom: 0;
z-index: -1;
}
