【demo】毛玻璃遮罩层

最新推荐文章于 2025-05-20 08:57:33 发布

原创最新推荐文章于 2025-05-20 08:57:33 发布 · 985 阅读

1 ·

CC 4.0 BY-SA版权

demo 专栏收录该内容

11 篇文章

订阅专栏

本文详细介绍了如何使用HTML和CSS创建具有毛玻璃效果的网页背景。通过设置div元素的样式，包括背景图片、模糊过滤器和透明遮罩层，实现了美观且响应式的页面设计。

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

<!DOCTYPE html>
<html>
    <head> 
        <meta charset="UTF-8"> 
        <title>Mask</title> 
        <style type="text/css"> 
        html, body { 
            width: 100%; 
            height: 100%; 
            margin: 0; 
        } 
        .banner { 
            width: 100%; 
            height: 100%; 
            z-index: -1; 
        } 
        .banner, .mask-bg { 
            background-image: url('img/timg.jpg'); 
            /* background-size: cover;  */
            background-position: center 0px; 
            background-repeat: no-repeat; 
        } 
        .mask-container { 
            height: 100px; 
            width: 100%; 
            box-shadow: rgba(0,0,0,0.3) 0 2px 2px; 
            position: relative; 
        } 
        .mask-bg { 
            width: 100%; 
            height: 220px; 
            position: absolute; 
            top: -10px; 
            filter: blur(10px); 
            -webkit-filter:blur(10px); 
            -moz-filter:blur(10px); 
            -o-filter:blur(10px); 
        } 
        .mask { 
            width: 100%; 
            height: 200px; 
            position: absolute; 
            background: rgba(255,255,255,0.4); 
            top: 0; 
        } 
        </style>
    </head>
    <body> 
        <div class="banner">
            <!--设置背景--> 
            <div class="mask-container">
                <!--构造毛玻璃容器--> 
                <div class="mask-bg"></div>
                <!--毛玻璃的背景--> 
                <div class="mask"></div>
                <!--毛玻璃中的内容--> 
            </div> 
        </div>
    </body>
    </html>

在这里插入图片描述