前端界面通常常需要在区域上加蒙版,以下个人整理了几种添加蒙版介绍
one
- 采用定位的父子级别加蒙版,采用子绝父相对的方式,需要注意层级性。
<!--模板以下均是这个模板-->
<div class="wrap">
<!--<div class="mark"></div>-->
<div class="inner"></div>
</div>
<!--css-->
.wrap {
position: relative;
width: 1200px;
height: 400px;
background: rgba(0, 0, 0, .5);
}
.wrap .inner {
position: absolute;
left: 0;
right: 0;
top: 0;
bottom: 0;
background: url(img/timg.jpg) no-repeat center center;
background-size: contain;
z-index: -1;
}
two
- 采用兄弟元素,添加一层蒙版,注意定位和层级性。层级要大于一般的层级。个人非常喜欢的一个样式。逻辑清晰。
<!--css-->
.wrap{
height: 300px;
width: 300px;
margin: 0 auto;
border: 1px solid #000000;
position: relative;
}
.wrap .inner{
width: 100%;
height: 100%;
background:url(img/timg.jpg) no-repeat;
background-size: cover;
}
.wrap .mark{
width: 100%;
height: 100%;
background: rgba(0,0,0,0.3);
position: absolute;
z-index: 2;
top: 0;
left: 0;
}
three
- 通过伪类元素叠加.注意层级性
<!--css-->
.wrap{
position: relative;
width: 1200px;
height: 400px;
background: url(img/timg.jpg) no-repeat center center;
background-size: cover;
}
.wrap::before {
content: "";
position: absolute;
left: 0;
right: 0;
bottom: 0;
top: 0;
background-color: rgba(0, 0, 0, .5);
z-index: 2;
}
four
- CSS3颜色叠加background-blend-mode:multiply;(正片叠底).浏览器兼容性不好.(ie 不识别)
<!--css-->
.wrap {
position: relative;
width: 1200px;
height: 400px;
background: url(img/timg.jpg) rgba(0, 0, 0, .5) no-repeat center center;
background-blend-mode: multiply;
}
- 扩展
- 背景模糊加颜色叠加
.wrap4 {
position: relative;
width: 1200px;
height: 400px;
background: url(img/timg.jpg) rgba(0, 0, 0, .5) no-repeat center center;
background-blend-mode: multiply;
filter: blur(2px);
overflow: hidden;
}