出自:小tip: 使用CSS将图片转换成模糊(毛玻璃)效果

.blur {
filter: url(blur.svg#blur); /* IE10, IE11 */ -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 */
}

blur.svg

<svg xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink" class="wh100">
<filter id="blur">
<feGaussianBlur in="SourceGraphic" stdDeviation="10" />
</filter>
<image filter="url(#blur)" x="0" y="0" width="100%" height="100%" xlink:href="{pic}" alt="">
</svg>

  

参考:

不得不收藏的——IE中CSS-filter滤镜小知识大全

Blur Filter 在线 demo--IE滤镜

css blur 的兼容写法的更多相关文章

  1. css 背景色渐变兼容写法

    最近在项目中,有很多地方都用到了线性渐变,比如:表单提交按钮的背景,数据展示的标题背景等等,按照以前的做法是切 1px 图片然后 repeat-x.下面我将介绍如何用 css 来完成该效果. css3 ...

  2. 【css】css 背景色渐变兼容写法

    最近在项目中,有很多地方都用到了线性渐变,比如:表单提交按钮的背景,数据展示的标题背景等等,按照以前的做法是切 1px 图片然后 repeat-x.下面我将介绍如何用 css 来完成该效果. css3 ...

  3. (转)css 背景色渐变兼容写法

    css3:linear-gradient 比如:黑色渐变到白色,代码如下: .gradient{ background: -moz-linear-gradient(top, #000000 0%, # ...

  4. CSS opacity的兼容写法

    opacity{ opacity:0.5; filter:alpha(opacity=50);  //filter 过滤器   兼容IE678 }

  5. IE浏览器兼容问题(上)——html和css的兼容写法

    用户使用的浏览器五花八门,我们要保证每一种浏览器都能兼容我们的代码,不能要求用户去改变浏览器,那么就得在我们的代码上下功夫.此时我们要用到hack. HACK就是针对不同的浏览器写不同的HTML.CS ...

  6. javascript阻止事件冒泡的兼容写法及其相关示例

    //阻止事件冒泡的兼容写法 function stopBubble(e){ //如果提供了事件对象,则是一个非IE浏览器 if(e && e.stopPropagation) //因此 ...

  7. div+css 布局下兼容IE6 IE7 FF常见问题

    div+css 布局下兼容IE6 IE7 FF常见问题 收藏 所有浏览器 通用 (市面上主要用到的IE6 IE7 FF)height: 100px; IE6 专用 _height: 100px; IE ...

  8. currentStyle和getComputedStyle的兼容写法

    今天学习javascript的时候,教程中介绍了一种简单实现jQuery 中css()方法的写法 <!DOCTYPE html> <html lang="en"& ...

  9. javascript常用函数封装——运动、cookie、ajax、获取行内样式兼容写法、拖拽

    运动.cookie.ajax.获取行内样式兼容写法.拖拽封装大合集. //url,data,type,timeout,success,error function ajax(options){ //- ...

随机推荐

  1. C++二级指针第二种内存模型(二维数组)

    C++二级指针第二种内存模型(二维数组) 二维数组 二维数组本质上是以数组作为数组元素的数组,即“数组的数组”. 定义 类型说明符 数组名[常量表达式][常量表达式] 例如: float a[3][4 ...

  2. C#开发中使用Npoi操作excel实例代码

    C#开发中使用Npoi操作excel实例代码 出处:西西整理 作者:西西 日期:2012/11/16 9:35:50 [大 中 小] 评论: 0 | 我要发表看法 Npoi 是什么? 1.整个Exce ...

  3. 借助Process Explorer定位断电未保存的录音文件

    话说某大神(大婶)开会常偷懒,用Windows自带的录音机进行录音并用记事本记录会议精要却没有点击Ctrl+S的习惯,结果就给我找了今天的难题.(之前都是Office的自动保存在哪里……) 还是一样, ...

  4. Android 5.x特性概览二

    上文 ,对Android 5.X特性,主要是Material Design的特性进行了介绍,这篇文章我们来使用Material Design主题. Material Design 现在有三种默认的主题 ...

  5. Linq学习之操作符

    一.环境搭建 下面将逐步搭建我们学习的环境,这个环境不仅仅是这次需要使用,以后的教程一样需要使用这个环境.所以请大家务必按照 搭建这里的环境否则会影响你后面的学习. 我们用到的几张表 通知消息表: 用 ...

  6. .NET跨平台:在Linux上基于ASP.NET 5用EF7生成数据库

    Linux用的是Ubuntu,dnx版本是1.0.0-beta6-12120,EF版本是7.0.0-beta5. 以下是用Entity Framework 7生成SQL Server数据库的操作步骤. ...

  7. js call

    转载地址:http://www.cnblogs.com/sweting/archive/2009/12/21/1629204.html call 方法 请参阅 应用于:Function 对象 要求 版 ...

  8. 作业七:团队项目——Alpha版本冲刺阶段-05

    昨天进展:代码编写. 今天安排:代码编写.

  9. javascript基础知识复习一

    JavaScript 一.数据类型 A.String B.Number C.boolean  1.undefined.false.null.0.“”这五个返回的都是false: 2.NAN==NAN返 ...

  10. Leetcode 172 Factorial Trailing Zeroes

    给定一个数n 求出n!的末尾0的个数. n!的末尾0产生的原因其实是n! = x * 10^m 如果能将n!是2和5相乘,那么只要统计n!约数5的个数. class Solution { public ...