遮罩层代码

最新推荐文章于 2024-05-12 23:29:14 发布

原创最新推荐文章于 2024-05-12 23:29:14 发布 · 474 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#css

工作日常同时被 3 个专栏收录

61 篇文章

订阅专栏

CSS

23 篇文章

订阅专栏

快速开发

16 篇文章

订阅专栏

本文分享了关于CSS遮罩层的实现技巧，通过使用fixed定位和透明度设置，能够快速创建覆盖全屏的背景遮罩，提升网页设计的专业性和用户体验。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1. 目的 : 直接复制来用, 加快工作效率

<div class="cover"></div>



.cover{
        position:fixed; /*注意使用fixed , absolute如果页面超出屏幕下面的遮不住, 害羞 */
        left:0px;
        top:0px;
        background:rgba(0, 0, 0, 0.8);
        width:100%;  /*宽度设置为100%，这样才能使隐藏背景层覆盖原页面*/
        height:100%;
        filter:alpha(opacity=80);  /*设置透明度为60%*/
        opacity:0.8;  /*非IE浏览器下设置透明度为60%*/
        // display:none; 
        z-Index:999;  
    }