css - 图像渲染：清晰的边缘和平滑值在 Chrome 中报告无效的属性值

Question

为什么我会看到这个？crisp-edges并且smooth应该是属性的有效值image-rendering，根据每个资源......

我两个都用过：

img {
    image-rendering: smooth;
}

img {
   image-rendering: crisp-edges;
}

我得到：

使用 Chrome 版本 92.0.4515.131。在 Firefox 中正常工作。

是的，两个连字符（在名称和值中）都出现在正确的位置。

这似乎是 Chrome 中的一个错误，但我想确保它不是我。

标签： cssimage

Answer 1

在撰写本文时，Chrome (92.0.4515.159) 不支持image-rendering: crisp-edges;，但支持image-rendering: pixelated;.

另一方面，Firefox (91.0.2) 支持image-rendering: crisp-edges;但不支持image-rendering: pixelated;.

这些新的值image-rendering仍然是一个候选推荐，这可以解释为什么浏览器对它们的支持不一致。希望一旦它成为一个实际的推荐浏览器供应商将急于实现对它的全面支持。

有关根据规范应该执行的不同图像渲染模式以及与当今浏览器实际实现的不同之处的更多信息，请参阅MDN 文档。

您还可能感兴趣的是对清晰边缘渲染的 Chromium 问题跟踪支持。