如何使用CSS打造毛玻璃效果

html-css013

如何使用CSS打造毛玻璃效果,第1张

其实毛玻璃的模糊效果技术上比较简单，只是用到了 css 滤镜（filter）中的 blur 属性。

1. 对元素直接使用模糊会将其内容全部模糊掉，为了保证文字不会模糊掉需要多一个层单独应用模糊效果。

2. 模糊效果并不会应用到其背后的元素上，所以需要使用 content 区域有和背景相同的背景图并进行模糊。

只是用到了css滤镜(filter)中的blur属性。

CSS中的毛玻璃特效主要使用了filter属性里的blur（）函数，也就是高斯模糊滤镜。

但是要做一个好的毛玻璃效果，需要注意很多细节。

一、高斯模糊是使用ps等工具实现的，方法如下（以ps为例）：

1、在ps中打开背景图；

2、点击菜单栏中的滤镜；

3、点击模糊，再选择高斯模糊，如图；

5、通过调整半径来调整模糊的强度（半径越大越模糊），如图：

二、全屏显示的css代码：

.bg {

   background-image:url(scale.jpg)

   -moz-background-size: 100% 100%/*  Firefox 3.6 */

   -o-background-size: 100% 100%/* Opera 9.5 */

   -webkit-background-size: 100% 100%/* Safari 3.0 */

   background-size: 100% 100%/*  Firefox 4.0 and other CSS3-compliant browsers */

   -moz-border-image: url(scale.jpg) 0/* Firefox 3.5 */

   filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='scale.jpg', sizingMethod='scale')/* for <ie9 */

}