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 效果如图