在 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>
最佳答案
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%);
}
关于css - 如何跨浏览器模糊图像?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/13495429/