用css使图片产生毛玻璃效果

　　毛玻璃的图片效果，使得其显示更加唯美，用户体验更佳，所以在手机端电脑端应用甚广

　　比如ios系统：

　　

　　所以现在我们就来看看毛玻璃效果的实现方法吧：

　　首先这是html的主要内容：

　　

<div class="container">
    <div class="mat_class"></div>
    <p class="word">SHOW TIME</p>
</div>

　　这里container用来放置文字

　　mat_class是用来形成毛玻璃效果的容器；

　然后奉上关键的css部分：

.container{
            width: 960px;
            height: 600px;
            background-image: url(img/img.jpg);
        }
        .mat_class{
            position: relative;
            top: 200px;
            width: 960px;
            height: 200px;
            filter: blur(5px);
        }
        .word{
            color: white;
            position: relative;
            left: 240px;
            font-size: 80px;
        }
            

 

　　　　代码很简单，我对值得注意的地方说明一下

　　　　毛玻璃实现的灵魂在这句话上：

background-image: inherit;

　　　　background-image默认是不会继承的，但如果设置了inherit，你适当的调节内层容器的长宽，然后你现在是什么感觉？

　　　　从相机看世界的感觉!

附效果：

　　原图：

　　成功变身后：

以上