Вопрос: Почему светлые края появляются на прозрачных PNG в Интернете?


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

1

(Я использую Google Chrome 27.0.1453.116)


2
2017-07-05 20:29


Источник


Как вы создали PNG? Какое сжатие (т.е. PNG24?) Вы используете? - kobaltz
Это скриншот проблемы - она ​​не прозрачна? Как насчет прикрепления фактического изображения? - Paul
@kobaltz: Это файл AI, открытый в Photoshop и сохраненный как PNG. Я сохранил их на большой ширине и высоте для совместимости с сетчаткой. Эти белые пятна чаще всего возникают, когда я масштабирую их с помощью CSS, и я вынужден использовать -webkit-optimize-contrast на нем, но он оставляет очень неудобный эффект, когда масштабируется очень мало.


Ответы:


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

Похоже, что это уменьшает изображение, которое браузер использует для изменения размеров прозрачных 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


4
2018-02-06 12:05





Поздний ответ, но это работает:

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


2
2018-05-22 09:18