Почему на прозрачных PNG-файлах появляются светлые края?

Question

Каждый раз, когда я пытаюсь использовать прозрачные изображения в формате PNG на сайтах, вокруг изображений появляются белые края, как видно на фотографии ниже. Почему это происходит, и как я могу остановить это?

(В настоящее время я использую Google Chrome 27.0.1453.116)

Answer 1

Это тоже сводило меня с ума, я должен был зарегистрироваться, чтобы ответить на него, чтобы никто больше не испытывал такого разочарования ...

Похоже, что это до рендеринга изображений, который браузер использует для изменения размера прозрачных PNG, которые добавляют к нему светлый край.

Я обнаружил, что добавление следующих свойств CSS к элементу изображения (или, если это фоновое изображение, сам элемент) решает проблему для меня в Chrome и Firefox:

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

Вы можете прочитать о дополнительных опциях здесь: https://developer.mozilla.org/en/docs/Web/CSS/image-rendering

Answer 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/