如何用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的部分,超级棒。