已被阅读 1562 次 | 文章分类: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;
}
QQ:3410192267 | 技术支持 微信:popstarqqsmall
Copyright ©2017 xiaobaigis.com . 版权所有 鲁ICP备17027716号