本文摘自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;
}
|
阅读剩余部分
相关阅读 >>
html5/CSS3 网页加载进度条的实现，下载进度条等经典案例
CSS3 @media怎么不起作用？是什么原因？
CSS3二级导航菜单制作步骤详解
CSS3多媒体查询的简单介绍（代码示例）
css实现基于用户滚动应用（代码）
怎样用CSS3制作登录框
CSS3如何实现图片平移
CSS3 教程
CSS3怎么加内边框
CSS3如何实现流星雨效果？（代码示例）
更多相关阅读请进入《CSS3》频道 >>
人民邮电出版社
本书对 Vue.js 3 技术细节的分析非常可靠，对于需要深入理解 Vue.js 3 的用户会有很大的帮助。——尤雨溪，Vue.js作者
转载请注明出处：木庄网络博客 » css3给背景图层加颜色遮罩的方法
