☰

为什么在线的透明 PNG 上会出现浅色边缘？

tag-icon • tag-icon html css png
为什么在线的透明 PNG 上会出现浅色边缘？

每次我尝试在网站上使用透明 PNG 图像时，图像周围都会出现白色边缘，如下图所示。为什么会出现这种情况？我该如何阻止这种情况发生？

1

（我目前使用的是 Google Chrome 27.0.1453.116）

答案1

这也让我抓狂不已，我不得不注册来回答这个问题，这样就不会有人感到沮丧了……

这似乎是由于浏览器使用图像渲染来调整那些透明 PNG 的大小，从而为其添加了亮边。

我发现在 Chrome 和 Firefox 中向图像元素添加以下 CSS 属性（或者如果它是背景图像，则是元素本身）可以解决此问题：

img, div.with-resized-background {
      image-rendering : -webkit-optimize-contrast
      image-rendering : optimizeQuality
}

您可以在这里阅读更多选项：https://developer.mozilla.org/en/docs/Web/CSS/image-rendering

答案2

答案迟了但是有效：

/* applies to GIF and PNG images; avoids blurry edges */
img[src$=".gif"], img[src$=".png"] {
    image-rendering: -moz-crisp-edges;         /* Firefox */
    image-rendering:   -o-crisp-edges;         /* Opera */
    image-rendering: -webkit-optimize-contrast;/* Webkit (non-standard naming) */
    image-rendering: crisp-edges;
    -ms-interpolation-mode: nearest-neighbor;  /* IE (non-standard property) */
}

https://developer.mozilla.org/en/docs/Web/CSS/image-rendering

这里还有另一个链接，讨论了浏览器支持情况：

https://css-tricks.com/almanac/properties/i/image-rendering/

相关内容