本文摘自PHP中文网，作者青灯夜游，侵删。
（学习视频分享：css视频教程）
在开发中，有时遇到需要给背景层加颜色遮罩的项目，现在特定总结一下给背景图层加颜色遮罩的方法。
方法一：通过定位叠加(注意层级)
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 | <div class="wrap1">
<div class="inner"> </div>
</div>
.wrap1 {
position: relative;
width: 1200px;
height: 400px;
background: rgba(0, 0, 0, .5);
}
.wrap1 .inner {
position: absolute;
left: 0;
right: 0;
top: 0;
bottom: 0;
background: url(ban8.jpg) no-repeat center center;
background-size: cover;
z-index: -1;
}
|
阅读剩余部分
相关阅读 >>
详解CSS3+svg滤镜实现不规则边框的方法
CSS3中box-sizing属性的解析（附代码）
text-overflow属性怎么用
html5和CSS3 实现灵动画的切换效果
overflow-x属性怎么用
CSS3动画属性有哪些
盒模型与bfc的深入讲解
CSS3中的animation-name属性怎么用
CSS3绘制一个圆圆的loading转圈动画实例分享
CSS3怎么让文字垂直居中显示
更多相关阅读请进入《CSS3》频道 >>
人民邮电出版社
本书对 Vue.js 3 技术细节的分析非常可靠，对于需要深入理解 Vue.js 3 的用户会有很大的帮助。——尤雨溪，Vue.js作者
转载请注明出处：木庄网络博客 » css3给背景图层加颜色遮罩的方法
