我希望在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年的bug.cgi?id=97991中被报告为一个bug,但是它的状态已经解决了。
发布于 2016-06-29 09:19:08
看起来它在Safari技术预览版中被修复了
https://stackoverflow.com/questions/37010271
复制相似问题