css - 如何在浏览器中模糊图像？

Question

在 Chrome 中，下面的 CSS 模糊了图像。但是，当我在 Firefox 中查看图像时，图像不再模糊。关于如何让它跨浏览器工作的任何建议？

div.wrapper{
    float:left; /* important */
    position:relative; /* important(so we can absolutely position the description div */ 
    padding: 5px;
}

div.imageblur{
    position: relative; 
    top: 0; 
    left: 0; 
    width: 320px; 
    filter: blur(5px);
       -webkit-filter: blur(5px);
       -moz-filter: blur(5px);
       -o-filter: blur(5px);
       -ms-filter: blur(5px);

   margin:-1px;
   padding:1px;
}

div.image_container{
   width:318px;
   overflow:hidden;
}

html

<div class="wrapper">

            <!-- image -->
            <div style="position: relative; left: 0; top: 0;">

                <div class="image_container">
                    <div class="imageblur">     
                        <a href="youtube/IiGW9JA_aPg"> <img src="http://i2.ytimg.com/vi/IiGW9JA_aPg/hqdefault.jpg"></a>
                    </div>
                </div>                  
            </div>
            <!-- end image div -->

</div>

Answer 1

那是因为 webkit 是唯一支持filter. http://caniuse.com/#feat=css-filters

另见：http ://www.html5rocks.com/en/tutorials/filters/understanding-css/

Answer 2

Firefox 也支持过滤器，但语法稍微复杂：这是我在小提琴上的一个示例：

img{
    filter: url("data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\'><filter id=\'grayscale\'><feColorMatrix type=\'matrix\' values=\'0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0 0 0 1 0\'/></filter></svg>#grayscale"); /* Firefox 3.5+ */
    filter: grayscale(100%);
}

过滤器示例

Answer 3

CSS 过滤器是非常新的，因此几乎没有支持。由于 webkit，Safari（夜间）和 Chrome 目前仅支持它。