请问如何在嵌套的div中写出css的毛玻璃效果

html-css09

请问如何在嵌套的div中写出css的毛玻璃效果,第1张

CSS代码：

.blur {

filter: url(blur.svg#blur)/* FireFox, Chrome, Opera */

-webkit-filter: blur(10px)/* Chrome, Opera */

-moz-filter: blur(10px) -ms-filter: blur(10px)

filter: blur(10px)

filter: progid:DXImageTransform.Microsoft.Blur(PixelRadius=10, MakeShadow=false)/* IE6~IE9 */}

HTML代码：

<div><img class="blur" /></div>

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

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

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