纯css实现毛玻璃效果

最新推荐文章于 2024-03-19 14:58:33 发布

weixin_34413103

最新推荐文章于 2024-03-19 14:58:33 发布

阅读量226

点赞数

文章标签： python

原文链接：https://my.oschina.net/xainghu/blog/1540535

版权

2019独角兽企业重金招聘Python工程师标准>>>

最近有用到毛玻璃效果，在此记录，一方面方便以后使用，另一方面也分享给其他朋友。

先上图：

通过对比，就可以看到效果还是很不错,下面是代码：

html：很简单

<div class="demo">
    ...
</div>

.demo{
    width: 100%;
    position: relative;
    background: url(/dist/sky2.jpg?504a01d03fb50d0616b672c90d145745) center top;
    background-size: cover;
    z-index: 100;
    overflow: hidden;
    box-sizing: border-box;
}
.demo:before {
    content: "";
    position: absolute;
    top: 0px;
    left: 0px;
    right: 0px;
    bottom: 0px;
    z-index: -1;
    -webkit-filter: blur(5px);
    filter: blur(5px);
    margin: -30px;
    background: url(/dist/sky2.jpg?504a01d03fb50d0616b672c90d145745) center top;
    background-size: cover;
    background-attachment: fixed;
}

注意：

两个background必须是同一张图片。

转载于:https://my.oschina.net/xainghu/blog/1540535