当前第2页 返回上一页
方法二：通过伪类元素叠加
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 | <div class="wrap2"></div>
.wrap2 {
position: relative;
width: 1200px;
height: 400px;
background: url(ban8.jpg) no-repeat center center;
background-size: cover;
}
.wrap2::before {
content: "";
position: absolute;
left: 0;
right: 0;
bottom: 0;
top: 0;
background-color: rgba(0, 0, 0, .5);
z-index: 2;
}
|
方法三：CSS3颜色叠加background-blend-mode:multiply;(正片叠底)
1 2 3 4 5 6 7 8 | <div class="wrap3"></div>
.wrap3 {
position: relative;
width: 1200px;
height: 400px;
background: url(ban8.jpg) rgba(0, 0, 0, .5) no-repeat center center;
background-blend-mode: multiply;
}
|
拓展：背景模糊加颜色叠加
1 2 3 4 5 6 7 8 9 | .wrap4 {
position: relative;
width: 1200px;
height: 400px;
background: url(ban8.jpg) rgba(0, 0, 0, .5) no-repeat center center;
background-blend-mode: multiply;
filter: blur(2px);
overflow: hidden;
}
|
更多编程相关知识，请访问：编程入门！！
以上就是css3给背景图层加颜色遮罩的方法的详细内容，更多文章请关注木庄网络博客！
返回前面的内容
相关阅读 >>
text-overflow属性怎么用
手把手教你使用CSS3给文字添加阴影效果（代码详解）
利用CSS3进行弹性布局时内容对齐的方法详解
transform-origin属性怎么用
overflow-x属性怎么用
CSS3如何实现图片平移
动画工具dragonbones的常用术语和使用方法介绍（图）
CSS3如何实现流星雨效果？（代码示例）
perspective属性怎么用
CSS3中如何实现图片翻转
更多相关阅读请进入《CSS3》频道 >>
人民邮电出版社
本书对 Vue.js 3 技术细节的分析非常可靠，对于需要深入理解 Vue.js 3 的用户会有很大的帮助。——尤雨溪，Vue.js作者
转载请注明出处：木庄网络博客 » css3给背景图层加颜色遮罩的方法
