CSS 实现毛玻璃效果

Part.1 HTML

1 <!-- 最外层盒子 -->
2 <div class="box">
3     <!-- 添加毛玻璃效果盒子 -->
4     <div class="box--effect"></div>
5     <!-- 展示的内容 -->
6     <div class="box_content">
7        <p class="box_content_text">头文字<span class="box_content_text_D">D</span></p>
8     </div>
9 </div>

Part.2 效果如下

Part.3  找到需要添加毛玻璃效果的盒子(DIV)，添加如下代码

 1 .box--effect {
 2     width: 100%;
 3     height: 100%;
 4     background: inherit;
 5     -webkit-filter: blur(5px);
 6     -moz-filter: blur(5px);
 7     -ms-filter: blur(5px);
 8     -o-filter: blur(5px);
 9     filter: blur(5px);
10     filter: progid:DXImageTransform.Microsoft.Blur(PixelRadius=4, MakeShadow=false);  /* ie6-9*/
11 }

Part.4  效果如图

 

转载于:https://www.cnblogs.com/langxiyu/p/10595299.html