0
我想禁用HTML元素中的背景图片模糊(它应该总是被缩放为像素化)。我使用了以下代码:Safari -webkit-optimize-contrast不适用于背景图片
<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中的一个错误,但它的状态已解决。