css3毛玻璃模糊效果
2024-10-18 23:50:56
CSS3 blur滤镜实现
如下测试代码:
.blur {
-webkit-filter: blur(10px); /* Chrome, Opera */
-moz-filter: blur(10px);
-ms-filter: blur(10px);
filter: blur(10px);
}
相关HTML代码如下:
<img src="mm1.jpg" />
<img src="mm1.jpg" class="blur" />
需要注意目前火狐不支持,其他些浏览器,如FireFox到目前还没有支持CSS3 filter. 当然,要实现(比方说)FireFox 24浏览器上照片变模糊的效果,也是可以的。可以使用SVG的模糊滤镜。
新建文命名为blur.svg的SVG文件:
<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg version="1.1"
xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink"
xmlns:ev="http://www.w3.org/2001/xml-events"
baseProfile="full">
<defs>
<filter id="blur">
<feGaussianBlur stdDeviation="10" />
</filter>
</defs>
</svg>
如下CSS调用代码:
filter: url(blur.svg#blur); /* FireFox, Chrome, Opera */
完整的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 */
}
最新文章
- Jquery-获取iframe中的dom对象
- bootstrap-进度条
- sql创建表格 转载
- scrapy 的三个入门应用场景
- hasSet,TreeSet,ArrayList,LinkedList,Vector,HashMap,HashTable,TreeMap利用Iterator进行输出
- iOS Foundation框架 -3.利用NSNumber和NSValue将非OC对象类型数据存放到集合
- SSO跨域解决方案
- Wireless Network(POJ 2236)
- Citrix 服务器虚拟化之三十一 XenApp 6.5负载均衡
- iOS 获取导航栏和状态栏的高度
- Samba原理和配置
- C#编程语言之委托与事件(二)—— C#事件
- Java 关于cannot resolve symbol &#39;log&#39;报错问题
- Android Studio中依赖第三库导致support版本冲突解决方案
- grep console
- hibernate、mybatis、spring data 的对比
- 课程设计——利用信号量实现哲学家进餐问题(JAVA)
- 使用nuget过程中一些问题总结
- 【BZOJ】3432: [Usaco2014 Jan]Cross Country Skiing (bfs+二分)
- google protocol buffer的原理和使用(一)