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

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

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

欢迎来访，欢迎指导。

前端页面加蒙版的几种方法相关推荐

webdriver 等待页面加载完成_Python爬虫，登陆神器Selenium等待(waits)页面加载的三种方法...
网页常常会因为网络原因,程序问题等等导致打开网页慢,一直在那里打圈圈. 出现这种情况时网页里的很多元素就没有加载完成,如果你刚好要定位的元素没有加载完,这时定位的话程序就会抛出异常. 所以程序里要加入 ...
前端页面跳转的几种方法
一.onclick跳转 1. 设置window的location.href属性 <span onclick="location='www.csdn.net'">点击在当 ...
前端页面加载缓慢的原因和性能优化问题
前端页面加载缓慢的原因和性能优化问题一.页面加载缓慢的原因二.前端性能优化方法一.页面加载缓慢的原因当我们打开一个网页,页面加载比较缓慢时,可能原因有以下几点: (1)过多的http请求 (2 ...
JS 实现页面跳转的几种方法
JS 实现页面跳转的几种方法要实现从一个页面A跳到另一个页面B,js实现就在A的js代码加跳转代码 JS跳转大概有以下几种方式: 第一种:(跳转到b.html) <script languag ...
本地html自动跳转,HTML页面跳转的5种方法
下面列了五个例子来详细说明,这几个例子的主要功能是:在5秒后,自动跳转到同目录下的hello.html(根据自己需要自行修改)文件. 1) html的实现优点:简单缺点:Struts Tiles中 ...
将页面元素隐藏的10种方法
在Web开发中,隐藏页面元素使其视觉不可见是一个非常常见的需求.为了实现这一目标,我们通常会采用多种方法,最常用的例如CSS的display属性,只要设置为node即可隐藏元素. 本文将通过对当前所有 ...
页面加载的几种方式和区别
目录页面加载的几种方式 DOM文档加载步骤原生JS的 ready阶段执行方法怎么写? 全部方式的演示代码 window和document的区别页面加载的几种方式(原生JS和jQuery) 1. ...
前端页面性能优化的几种方式
前端页面性能优化的几种方式提升页面性能优化的常见方式: 资源压缩合并,减少http请求非核心代码异步加载 --> 异步加载的方式 --> 异步加载的区别利用浏览器缓存 --> ...
php伪造页面url地址,php 伪造HTTP_REFERER页面URL来源的三种方法
php获取当前页面的前一个页面URL地址,即当前页面是从哪个页面链接过来的,可以使用$_SERVER['HTTP_REFERER'],但是这个来源页面的URL地址是可以被伪造和欺骗的,本文章向大家介绍 ...
js 控制页面跳转的5种方法
js 控制页面跳转的5种方法编程式导航: 点击跳转路由,称编程式导航,用js编写代码跳转. History是bom中的History.back是回退一页Histiory.go(1)前进一页Histo ...

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

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

欢迎来访，欢迎指导。

前端页面加蒙版的几种方法相关推荐

最新文章

热门文章