遮罩层代码

最新推荐文章于 2021-06-01 10:02:39 发布

Tian_____

最新推荐文章于 2021-06-01 10:02:39 发布

阅读量239

点赞数

分类专栏： Css

原文链接：https://blog.youkuaiyun.com/jiandan1127/article/details/84824371

版权

Css 专栏收录该内容

2 篇文章

订阅专栏

本文深入探讨了CSS中遮罩层的样式设置方法，包括使用fixed定位确保遮罩层覆盖整个页面，调整透明度以实现半透明效果，以及如何通过设置宽度和高度属性确保遮罩层覆盖整个屏幕。此外，还介绍了如何使用rgba颜色值来创建带有透明度的黑色背景。

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

<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;  
    }