css blur 的兼容写法

出自:小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}" >
</svg>

  

参考:

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

Blur Filter 在线 demo--IE滤镜

时间: 2024-08-27 18:20:17

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

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

css3:linear-gradient 比如:黑色渐变到白色,代码如下: .gradient{ background: -moz-linear-gradient(top, #000000 0%, #ffffff 100%); background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#000000), color-stop(100%,#ffffff)); background: -webkit-linea

透明度的兼容写法

css透明度的兼容性写法: 1 filter: Alpha(opacity=10); /* IE */ 2 -moz-opacity:0.1; /* 兼容老版本的FF */ 3 opacity:0.1; /* 现代浏览器 */ 比较常用,前端开发人员必须记住.

background-size: contain 与cover的区别,以及ie78的兼容写法

一:background-size: contain 与cover的区别: 作用: 都是将图片以**相同宽高比**缩放以适应整个容器的宽高. 不同之处在于: 1.  在no-repeat情况下,如果容器宽高比与图片宽高比不同, cover:图片宽高比不变.铺满整个容器的宽高,而图片多出的部分则会被截掉: contain:图片自身的宽高比不变,缩放至图片自身能完全显示出来,所以容器会有留白区域: PS:其实,从英文的意思来说:cover意味着“遮罩.遮盖”---此处理解为“塞满”较恰当,conta

currentStyle和getComputedStyle的兼容写法

今天学习javascript的时候,教程中介绍了一种简单实现jQuery 中css()方法的写法 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style> #div{ width: 200px; height: 200px; background: re

Apache htaccess 设置 设置expires和max-age缓存 的兼容写法

htaccess文件内容: <pre name="code" class="plain"><IfModule mod_headers.c> <FilesMatch "\.(ico|pdf|flv|jpg|jpeg|png|gif|js|css|swf)$"> Header set Cache-Control "max-age=604800, public" </FilesMatch&g

IE浏览器跟火狐浏览器兼容写法3

HACK设置 仅IE7识别 *+html {…} 当面临需要只针对IE7做样式的时候就可以采用这个HACK. IE6及IE6以下识别 * html {…} 这个地方要特别注意很多地主都写了是IE6的HACK其实IE5.x同样可以识别这个HACK.其它浏览器不识别. html/**/ >body select {……}网页教学网 这句与上一句的作用相同. 仅IE6不识别 select { display /*IE6不识别*/:none;} 这里主要是通过CSS注释分开一个属性与值,流释在冒号前.

IE浏览器跟火狐浏览器兼容写法2

XHTML+CSS兼容性解决方案小集 ! 我就先把一些我遇到的问题写在下面: 1.在mozilla firefox和IE中的BOX模型解释不一致导致相差2px解决方法: div{margin:30px!important;margin:28px;}注意这两个margin的顺序一定不能写反,据阿捷的说法!important这个属性IE不能识别,但别的浏览器可以识别.所以在IE下其实解释成这样: div{maring:30px;margin:28px}重复定义的话按照最后一个来执行,所以不可以只写m

IE浏览器跟火狐浏览器兼容写法(1)

CSS样式表在Firefox和IE下的区别 总结的一些CSS在FF和IE下的区别!可能不完整,以后会陆续补充. FireFox: div 设置 margin-left, margin-right 为 auto 时已经居中, IE 不行 FireFox: body 设置 text-align 时, div 需要设置 margin: auto(主要是 margin-left,margin-right) 方可居中 FireFox: 设置 padding 后, div 会增加 height 和 widt

CSS之flex兼容

随着自己写过的页面的增多,也遇到了很多CSS兼容性的问题.这些兼容性问题,都是必然的,因为技术在不断进步,不断革新,所谓,“后浪推前浪,前浪拍死在沙滩上”,当然我们的技术不能是被拍死在沙滩上,我们还要支持,不支持的话,只能是你这个页面,这个产品被淘汰. 那么为了不被淘汰,我们就要做些兼容性处理. 我写页面的时候用到过很多的flex布局,觉得非常好用.下面附上一篇不错的flex布局介绍的文章. Flex 布局教程想了解的可以自己去看看这篇博文,或者自己百度,这里先部多做介绍,我们主要来说一说fle