前端页面加蒙版的几种方法

前端界面通常常需要在区域上加蒙版,以下个人整理了几种添加蒙版介绍

---

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;
}

欢迎来访，欢迎指导。