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中的一個錯誤,但它的狀態已解決。