的HTML

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

FILTER EXAMPLE

Answer 3

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

如何跨浏览器模糊图像？

的HTML

3 个答案: