css 给背景加遮罩层

CSS 的使用不仅可以美化页面，还可以实现很多实用的功能，比如给背景加遮罩层。下面是具体的实现方法：

code>
/* 先定义遮罩层的样式 */.overlay{
        position: fixed;
        top: 0;
        left: 0;
        height: 100%;
        width: 100%;
        background-color: rgba(0,0,0,0.5);
 /* 这里的透明度可以自己调整 */}
/* 接着在要加遮罩层的元素上加上position: relative */.container{
        position: relative;
}
/* 最后在容器内添加遮罩层 */.container::before{
        content: "";
        display: block;
        position: absolute;
        top: 0;
        left: 0;
        height: 100%;
        width: 100%;
        z-index: 1;
     /* 将遮罩层置于下一个图层 */    background-color: rgba(0,0,0,0.5);
}
    /code>
    

以上代码就是加遮罩层的基本实现方式，可以根据实际需求自行调整样式。需要注意的是，遮罩层的 z-index 属性要比容器内的其他元素小，否则会覆盖容器内的元素。

声明：本文内容由网友自发贡献，本站不承担相应法律责任。对本内容有异议或投诉，请联系2913721942#qq.com核实处理，我们将尽快回复您，谢谢合作！