1

我正在使用 CSS3 过滤器属性并尝试在 Chrome 和 Firefox 中获得类似的结果，尽管每个浏览器的语法和实现都不同。

在 Chrome 中，我使用以下 CSS 对图像应用模糊效果：

#chrome-blur {
    -webkit-filter: blur(10px);
}

在 Firefox 中，我使用以下 CSS 来应用模糊效果，它在页面正文中引用了 SVG 过滤器。

#firefox-blur {
    filter: url(#blur);
}

这一切都很好，但是 Firefox 版本在模糊图像中显示条带。我想知道我的 SVG 过滤器是否需要工作，或者 Firefox 中的算法是否存在问题？

http://codepen.io/vcurd/pen/pDwqr的完整示例

4

1 回答 1

0

在 MacOS 上，这看起来很棒并且没有条纹，所以这似乎只发生在 Windows 上（至少是 Vista）。Firefox 在 Windows 上的渐变实现同样糟糕 - 所以我怀疑这是由于他们使用的任何原生图形调用。您可以通过使用 filterRes 调低过滤器分辨率来消除特定图像中最糟糕的条带，该过滤器具有在模糊图像之前对图像进行下采样的效果。

<filter id="blur" filterRes="60">

似乎是一个不错的结果。缺点是现在在 MacOS 上看起来像素化了。

我已经尝试过添加噪点、置换贴图，甚至将多个不同的模糊合成在一起，以及颜色插值过滤器和图像渲染等 CSS 设置，但除了将其戳到下采样之外，没有任何方法可以修复它。

于 2012-10-22T07:45:37.470 回答