前段时间在开发中,遇到需要给背景层加颜色遮罩的项目,现在特定总结一下给背景图层加颜色遮罩的方法。
方法一:通过定位叠加(注意层级)
.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;
}
方法二:通过伪类元素叠加
.wrap2 {
position: relative;
width: 1200px;
height: 400px;
background: url(ban8.jpg) no-repeat center center;
background-size: cover;
}
.wrap2::before {
content: "";
position: absolute;
left: 0;
right: 0;
bottom: 0;
top: 0;