Safari -webkit-optimize-contrast 不适用于背景图像
Safari -webkit-optimize-contrast not working for background images
我想禁用 html 元素中的背景图像模糊(它应该始终像素化以进行缩放)。我使用了以下代码:
<div id="chart"></div>
<style>
#chart {
height: 300px;
width: 100%;
background-image: url('image.jpg');
background-position: 0 0;
background-repeat: no-repeat;
background-size: 100% 300px;
image-rendering: optimizeSpeed; /* Legal fallback */
image-rendering: -moz-crisp-edges; /* Firefox */
image-rendering: -o-crisp-edges; /* Opera */
image-rendering: -webkit-optimize-contrast; /* Safari */
image-rendering: optimize-contrast; /* CSS3 Proposed */
image-rendering: crisp-edges; /* CSS4 Proposed */
image-rendering: pixelated; /* CSS4 Proposed */
-ms-interpolation-mode: nearest-neighbor; /* IE8+ */
}
</style>
它似乎适用于除 Safari 之外的所有浏览器。虽然,如果我将 css 直接应用于 img
元素而不是 div
或者如果我删除 background-size
属性.
它在 Safari 中工作
我还发现它在 2012 年被报告为错误 https://bugs.webkit.org/show_bug.cgi?id=97991,但它的状态已解决。
看起来它已在 Safari 技术预览中修复
我想禁用 html 元素中的背景图像模糊(它应该始终像素化以进行缩放)。我使用了以下代码:
<div id="chart"></div>
<style>
#chart {
height: 300px;
width: 100%;
background-image: url('image.jpg');
background-position: 0 0;
background-repeat: no-repeat;
background-size: 100% 300px;
image-rendering: optimizeSpeed; /* Legal fallback */
image-rendering: -moz-crisp-edges; /* Firefox */
image-rendering: -o-crisp-edges; /* Opera */
image-rendering: -webkit-optimize-contrast; /* Safari */
image-rendering: optimize-contrast; /* CSS3 Proposed */
image-rendering: crisp-edges; /* CSS4 Proposed */
image-rendering: pixelated; /* CSS4 Proposed */
-ms-interpolation-mode: nearest-neighbor; /* IE8+ */
}
</style>
它似乎适用于除 Safari 之外的所有浏览器。虽然,如果我将 css 直接应用于 img
元素而不是 div
或者如果我删除 background-size
属性.
我还发现它在 2012 年被报告为错误 https://bugs.webkit.org/show_bug.cgi?id=97991,但它的状态已解决。
看起来它已在 Safari 技术预览中修复