当前第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给背景图层加颜色遮罩的方法的详细内容，更多文章请关注木庄网络博客！
返回前面的内容
相关阅读 >>
h5移动端 超实用的CSS3模拟边框最新研究示例代码
ie8兼容CSS3吗
CSS3是什么技术
h5和CSS3有哪些新特性
CSS3和h5实现波纹特效实例代码
CSS3如何实现流星雨效果？（代码示例）
CSS3如何实现聊天气泡效果？（代码示例）
background-size属性怎么用
CSS3 animation属性怎么用
text-wrap属性怎么使用
更多相关阅读请进入《CSS3》频道 >>
人民邮电出版社
本书对 Vue.js 3 技术细节的分析非常可靠，对于需要深入理解 Vue.js 3 的用户会有很大的帮助。——尤雨溪，Vue.js作者
转载请注明出处：木庄网络博客 » css3给背景图层加颜色遮罩的方法
