遮罩层——通过阴影弱化背景的四种方案
来源:互联网 发布:forespider采集软件 编辑:程序博客网 时间:2024/06/05 19:52
方法一:
代码-1:
/* 用于遮挡背景 */.overlay { position: fixed; top: 0; right: 0; bottom: 0; left: 0; background: rgba(0,0,0, 0.8);}/* 需要吸引用户注意的元素 */.lightbox { position: absolute; z-index: 1; width: 40%; height: 140px; background-color: #FFF; margin-top: 10em; margin-left: 30%;}
缺点: 需要增加一个额外的HTML元素。这意味着该效果无法由css单独实现。
方法二: 伪元素方案
代码-2:
body.dimmed::before { position: fixed; top: 0; right: 0; bottom: 0; left: 0; z-index: 1; background: rgba(0,0,0, 0.8);}
优点:
- 相对灵活,可一满足绝大多数人对遮盖层的期望。
缺点:
- 可移植性还不够好,因为
<body>
元素上可能有其它需要占用: :before
伪元素。 - 需要一点JavaScript来给添加dimmed这个类。
- 伪元素无法绑定独立的JavaScript事件处理函数。
方法三:box-shadow方案
代码-3:
box-shadow: 0 0 0 999px rgba(0,0,0, 0.8);
上面的代码片段中第四个参数' 999px '
是扩张参数,它可以把元素的投影向各个方向延伸放大。具体实现的效果就是,产生一个巨大的投影,不偏移也不模糊,这样也就简单地模拟出了遮罩层的效果了。
代码-3的不足:
- 无法在较大的屏幕分辨率(>2000px)下正常工作。
解决办法: 使用视口单位(vmax) 代替 像素(px)。改进后的代码如下.
代码-4:
box-shadow: 0 0 0 50vmax rgba(0,0,0, 0.8);
1vmax = (1vw 和 1vh两者中的较大值)。100vw等于整个视口宽度,100vh等于整个视口的高度。因此,满足我们需要的最小值就是50vmax。又因为投影是同时向四个方向扩展的,所以,这个遮罩层的最终尺寸将是100vmax加上元素本身的尺寸。
代码-4的优点:
- 简介易用
缺点:
- 当我们滚动页面的时候,遮罩层的边缘就露出来了。除非在给它加上
position: fixed;
- 只能视觉上气道引导注意力的作用,确无法阻止鼠标交互。
方法四:backdrop方案
使用元素(
dialog::backdrop { background: rgba(0,0,0, .8);}
代码-5 的唯一不足就是浏览器对它的支持还有限。即存在浏览器兼容为题。
1 0
- 遮罩层——通过阴影弱化背景的四种方案
- .net生态环境的弱化
- map的弱化构造
- .net生态环境的弱化
- 背景阴影
- submit按钮的背景阴影如何去掉?
- xml设置渐变+阴影的背景
- 阴影背景随着文字的宽度自适应
- DrawerLayout背景设置的问题,去除阴影
- DrawerLayout背景设置的问题,去除阴影
- 基于色度和亮度的背景建模及阴影去除方法—看到一篇文献的总结
- spring学习(四)—属性注入的四种方法(通过配置文件)
- [HTML] 琐琐碎碎(四)——背景
- Partition-方案四:通过 DBMS_REDEFINITION 方法
- 实现控件透明背景的几种方案
- 排序5——快速排序的四种优化方案
- 实现ORM的四种方案
- Map遍历的四种方案
- CSS中的几种选择器
- Andorid与其他操作系统的知识
- mybatis-generator-1.3.2生成数据库的中文注释
- 网络流刷题记录-最小割
- 你真的了解OKR吗?
- 遮罩层——通过阴影弱化背景的四种方案
- MySQL(一)
- 专题四1002
- Learn Once ,Write Anywhere —— 从零开始学习React Native(一)搭建环境
- JVM垃圾回收机制
- JAVA——对象的序列化Serializable
- AR模型(Autoregress)
- phpcms 同步到发布站点,发布站点到远程FTP根目录
- div+css做出带三角的弹出框