遮罩层——通过阴影弱化背景的四种方案
2016-06-24 21:32
260 查看
方法一:
代码-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 的唯一不足就是浏览器对它的支持还有限。即存在浏览器兼容为题。
相关文章推荐
- Web布局连载——两栏固定布局(五)
- [div+css]晒晒最新制作专题推广页模板
- 盒子模型
- CSS选择器
- CSS样式优先权
- [css] line-height 百分比单位和数值单位的区别
- Apple官网研究之使用Justify布局导航
- 关于前端的思考与感悟
- rem : web app适配的秘密武器
- jquery高级应用之Deferred对象
- 移动端点击事件全攻略,这里的坑你知多少?
- 设计更快的网页(三):字体和 CSS 调整
- 纯CSS制作的新闻网站中的文章列表
- 10条影响CSS渲染速度的写法与使用建议第1/3页
- BS项目中的CSS架构_仅加载自己需要的CSS
- 很不错的 CSS Hack 又学了一招
- 发一个css比较清爽的写法
- CSS expression控制图片自动缩放效果代码[兼容 IE,Firefox]
- css布局网页水平居中常用方法