毛玻璃效果 css

毛玻璃效果

<style>
        .container{
            width: 287px;
            height: 285px;
            background-image: url(img/background.png);
            background-repeat: no-repeat;
            background-attachment: fixed;
            overflow: hidden;
        }

        .frosted-glass{
            width: 287px;
            height: 285px;
            background: inherit;
            -webkit-filter: blur(5px);
            -moz-filter: blur(5px);
            /*-ms-filter: blur(5px);*/
            /*-o-filter: blur(5px);*/
            filter: blur(5px);
            filter: progid:DXImageTransform.Microsoft.Blur(PixelRadius=4, MakeShadow=false);
        }
        .weather{
            width:80px;
            height:80px;
            margin-top: -200px;
            margin-left: 100px;
            position: relative;
            display: block;
        }
</style>
<body>
    <div class='container'>
        <div class='frosted-glass'></div>
        <img class='weather' src='img/cloudy.png'>
    </div>
</body>

大神链接：https://www.cnblogs.com/kongxianghai/p/5059966.html

posted @ 2019-12-03 10:26  苹果π  阅读(762)  评论(0)  编辑  收藏  举报