遮罩层——通过阴影弱化背景的四种方案

最新推荐文章于 2024-05-30 16:48:43 发布

Dragon_GL

最新推荐文章于 2024-05-30 16:48:43 发布

阅读量7.5k

点赞数 2

分类专栏： CSS 文章标签： CSS

本文链接：https://blog.csdn.net/u014695532/article/details/51755813

版权

CSS 专栏收录该内容

11 篇文章 0 订阅

订阅专栏

这里写图片描述

方法一：

代码-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 的唯一不足就是浏览器对它的支持还有限。即存在浏览器兼容为题。

Dragon_GL

关注

2
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
遮罩层——通过阴影弱化背景的四种方案

方法一：代码-1：/* 用于遮挡背景 */.overlay { position: fixed; top: 0; right: 0; bottom: 0; left: 0; background: rgba(0,0,0, 0.8);}/* 需要吸引用户注意的元素 */.lightbox { position: absolute;
复制链接

扫一扫