本文摘自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选择器:read-write和:read-only是什么？如何使用？
动画工具dragonbones的常用术语和使用方法介绍（图）
html如何取消文本选中
animation-fill-mode属性怎么用
CSS3 @media怎么不起作用？是什么原因？
CSS3怎么实现强制不换行
CSS3动画属性有哪些
wxss和CSS3的区别是什么
CSS3如何设置placeholder的样式
html5中dialog元素的详细讲解（代码示例）
更多相关阅读请进入《CSS3》频道 >>
人民邮电出版社
本书对 Vue.js 3 技术细节的分析非常可靠，对于需要深入理解 Vue.js 3 的用户会有很大的帮助。——尤雨溪，Vue.js作者
转载请注明出处：木庄网络博客 » css3给背景图层加颜色遮罩的方法
