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

Firefox 也支持过滤器，但语法略微复杂:这是我在 fiddle 上的示例:

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%);
}

FILTER EXAMPLE