[分享]css做透明遮罩层效果

在网页设计中，透明遮罩层被广泛应用于一些小效果展示、广告弹窗、以及重要信息的提示浮窗等等。接下来，我们就来看看如何使用 CSS 来实现这种透明遮罩层效果。html,body { height:100;...

在网页设计中，透明遮罩层被广泛应用于一些小效果展示、广告弹窗、以及重要信息的提示浮窗等等。接下来，我们就来看看如何使用 CSS 来实现这种透明遮罩层效果。

html,body {
    height:100%;
}
.mask {
    position:fixed;
    top:0;
    left:0;
    width:100%;
    height:100%;
    background:rgba(0,0,0,0.5);
    z-index:999;
} 

上面的代码中，我们先定义了整个页面的高度为 100% ，接着定义了要加上透明遮罩层的元素类名为 .mask 。并且设置 .mask 的定位方式为固定定位，为了让它可以遮盖在所有元素之上，我们将它的 z-index 属性设置得较大。

最关键的一点在于 .mask 的背景颜色要使用 rgba 或者 hsla 这种能够设置透明度的颜色值，这里使用的是 rgba(0,0,0,0.5)，其中 0.5 表示透明度为 50% 。

这样，当页面中使用了 .mask 类名的元素被显示出来时，就会在页面中覆盖上一层半透明黑色背景，达到了类似于遮罩层的效果。