【demo】毛玻璃遮罩层

最新推荐文章于 2024-05-07 17:34:19 发布

阿庭

最新推荐文章于 2024-05-07 17:34:19 发布

阅读量889

点赞数

分类专栏： demo

本文链接：https://blog.csdn.net/weixin_43606809/article/details/97398089

版权

demo 专栏收录该内容

11 篇文章 0 订阅

订阅专栏

<!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>

在这里插入图片描述

阿庭

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
【demo】毛玻璃遮罩层

<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title>Mask</title> <style type="text/css"> html, body { ...
复制链接

扫一扫