手机
当前位置:查字典教程网 >网页设计 > 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实现照片模糊效果类似毛玻璃效果】相关文章:

17个有趣实用的CSS 3悬停效果教程

CSS的滤镜的效果详细介绍

用css实现透视效果

CSS滤镜实现的颜色渐变翻转效果

css实现body背景图片水平垂直居中方法

CSS 3实现DIV圆角效果完整代码

css让图片等比例缩小的代码

div+css实现的滑动门

一款css实现的鼠标经过按钮的特效

css实现鼠标滑过改变文字(中文变英文)

精品推荐
分类导航