本文摘自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;
}
|
阅读剩余部分
相关阅读 >>
animation-duration属性有什么用
CSS3的:out-of-range和:in-range伪类有什么用？（代码示例）
CSS3 loading 什么意思
CSS3怎么让文字垂直居中显示
CSS3 appearance属性怎么用？
浅谈CSS3 grid网格布局（display: grid）的用法
html5和CSS3制作一个模态框实例
word-wrap属性怎么用
css中display: inline-block的用法解析
CSS3 flexbox该怎么使用？
更多相关阅读请进入《CSS3》频道 >>
人民邮电出版社
本书对 Vue.js 3 技术细节的分析非常可靠，对于需要深入理解 Vue.js 3 的用户会有很大的帮助。——尤雨溪，Vue.js作者
转载请注明出处：木庄网络博客 » css3给背景图层加颜色遮罩的方法
