本文摘自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;
}
|
阅读剩余部分
相关阅读 >>
css怎么让图案上下浮动
html5和CSS3扁平化风格博客教程的资源分享
h5和CSS3有哪些新特性
CSS3哪个是设置动画播放次数
CSS3中媒体查询的语法组成是什么
html5与CSS3的新交互特性
如何让ie支持CSS3
CSS3怎么实现强制不换行
CSS3是什么技术
h5和CSS3制作一个相册的代码实例
更多相关阅读请进入《CSS3》频道 >>
人民邮电出版社
本书对 Vue.js 3 技术细节的分析非常可靠，对于需要深入理解 Vue.js 3 的用户会有很大的帮助。——尤雨溪，Vue.js作者
转载请注明出处：木庄网络博客 » css3给背景图层加颜色遮罩的方法
