如何用CSS做漂亮的毛玻璃效果

发表于 | 分类于 |

前两天在网上看到有个用css做的毛玻璃效果，好喜欢，就仿着做了个demo。
demo我放在了新浪云上：演示地址
是不是很好看呢，我很喜欢。图是我在网上自己瞎找到，花瓣只是个动态图，所以才会动。

主要是给背景用filter:blur属性（要加上浏览器内核以兼容各种浏览器），背景虚化后，再对不用虚化的内容比如图片和文字，让他们定位到相应的位置。

1
2
3
4
5
<div class="container">
	<div class="pic"></div>
	<img src="./images/a.jpg" alt="" class="weather">
	<span class="text">北京 晴 3-5C</span>
</div>

这个demo的大致布局如上，很简单。我让container当做图片容器，对pic进行虚化，并让container的大小和pic完全相同并重叠（inherit）,这样大致的毛玻璃就出来了，然后为了突出毛玻璃的效果，需要把前添加一点元素，使有层次感，就是这里的小花瓣和文字北京晴啦，需要的是对他们进行相对于container的绝对定位，定位到中间的位置：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
.container {
    width: 650px;
    height: 400px;
    background: transparent url("./images/background.jpg") no-repeat fixed 0% 0%;
    position: relative;
}
.pic{
    width:650px;
    height: 400px;
    background: inherit;
    -webkit-filter:blur(5px);
    -moz-filter:blur(5px);
    -o-filter:blur(5px);
    filter:blur(5px);
    filter: progid:DXImageTransform.Microsoft.Blur(PixelRadius=4, MakeShadow=false);
}
.weather {
    width: 80px;
    height: 80px;
    display: block;
    position: absolute;
    top: 30%;
    left: 40%;
}

有的时候会看到这个filter:progid:DXImageTransform.Microsoft.Blur(pixelRadius=6, MakeShadow=false); / IE6~IE9 /。这是代表要支持IE6~IE9。

再还有两个例子：

[例子1 ]源于我仿的外国的一个人做的&& [例子2] 源于html5中国
还有一个推荐就是张鑫旭的博客里面对这个讲的很好，而且有实例，有详细的讲解，还有关于svg的部分，超级棒。