简单CSS实现毛玻璃效果

首页 » 教程资料 » 2020年08月24日晚上 10:26:55 » 本文：1077字
  • A

    选择打赏方式

毛玻璃大家应该都懂是什么来的，咱也废话不多说直接上代码：

CSS部分： 

* {
    padding: 0;
    margin: 0;
    outline: 0;
}

html,
body {
    width: 100%;
    height: 100%;
    background: url("http://h1.ioliu.cn/bing/HappyBalloon_ZH-CN0324866466_1920x1080.jpg?imageslim") no-repeat center/cover;
}

.content {
    float: left;
    width: calc(100% - 160px);
    height: calc(100% - 160px);
    margin: 80px;
    overflow: hidden;
    border-radius: 40px;
    box-shadow: 0 0 80px #555;
}

.bg {
    float: left;
    width: calc(100% + 160px);
    height: calc(100% + 160px);
    margin: -80px 0 0 -80px;
    background: url("http://h1.ioliu.cn/bing/HappyBalloon_ZH-CN0324866466_1920x1080.jpg?imageslim") no-repeat center/cover;
    filter: blur(20px);
}
HTML部分： 

<div class="content">
    <div class="bg"></div>
</div>

本文标签：HTML
版权声明：若无特殊注明，本文为《傲世》原创，转载请保留文章出处。
本文链接：https://www.recho.cn/168.html
如您对本文章内容有所疑问、反馈或补充，欢迎通过邮箱：[email protected] 联系我们！
正文到此结束

热门推荐