简单CSS实现毛玻璃效果

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

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>

版权声明:若无特殊注明,本文为《小傲世》原创,转载请保留文章出处。
本文链接:https://pjax.vip/170.html
正文到此结束

热门推荐

发表吐槽

你肿么看?

你还可以输入 250 / 250 个字

呵呵 哈哈 吐舌 开心 笑眼 可怜 乖 啊 你懂得 不高兴 生气 汗 黑线 哭 真棒 阴险 鄙视 酷 滑稽 纳尼 疑问 委屈 惊讶 勉强

评论信息框
可使用QQ号实时获取昵称+头像

私密评论

吃奶的力气提交吐槽中...


既然没有吐槽,那就赶紧抢沙发吧!