9

我正在使用这些过滤器对图像进行去饱和处理：

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");
    filter: gray;
    -webkit-filter: grayscale(1);
}

它工作得很好，尽管过滤器似乎在 Mobile Safari 上对图像进行了像素化。我不知道为什么会这样。是否有保持清晰度的秘诀？还是我必须忍受这个浏览器的缺点？例如，以下是一些并列的屏幕截图，取自 iOS 模拟器：

带灰度滤镜

不带过滤器

4

2 回答 2

7

有点太晚了，但这应该可以解决问题：

-webkit-transform: translateZ(0);

来源： http: //matthewhappen.com/fixing-css3-filter-blur-on-retina-displays/

于 2013-07-10T22:14:55.917 回答
0

我不知道移动 safari 是采用过滤器样式还是 -webkit-filter。

我不相信 -webkit 过滤器允许你指定过滤器分辨率，所以如果你想覆盖这个默认行为，你必须在过滤器定义中添加一个 filterRes=400 或者替代方法是去内联 svg 和为您的过滤器指定一个明确的 filterRes 。

<svg>
   <defs>
     <filter id="greyscale" filterRes="1278">
        <feColorMatrix etc...>
     </filter>
   </defs>

Images...

</svg>
于 2012-12-13T21:09:35.257 回答