手机
当前位置:查字典教程网 >网页设计 > Div+Css教程 >css实现照片模糊效果类似毛玻璃效果
css实现照片模糊效果类似毛玻璃效果
摘要:css中:.blur{filter:url(blur.svg#blur);-webkit-filter:blur(3px);-moz-fil...

<img src="test.jpg" />

css中:

.blur {

filter: url(blur.svg#blur);

-webkit-filter: blur(3px);

-moz-filter: blur(3px);

-ms-filter: blur(3px);

filter: blur(3px);

filter: progid:DXImageTransform.Microsoft.Blur(PixelRadius=10, MakeShadow=false);

}

针对css第一行需要引入文件 blur.svg

blur.svg 的内容如下

<svg version="1.1" xmlns="http://www.w3.org/2000/svg">

<filter id="blur">

<feGaussianBlur stdDeviation="3" />

</filter>

</svg>

【css实现照片模糊效果类似毛玻璃效果】相关文章:

用css实现隐藏文本框

CSS UL LI布局实现表格效果

一款纯css实现的垂直时间线效果

css图片透明效果

css3实现闪亮进度条效果

CSS3 实用技巧:实现黑白图像效果示例代码

巧用CSS3 border实现图片遮罩效果代码

用CSS实现文字的阴影效果

CSS实现兼容性的渐变背景(gradient)效果兼容众多浏览器

利用CSS3实现毛玻璃效果示例源码

精品推荐
分类导航