Как исправить полосу изображения PNG в браузере Android (мобильный веб-сайт)? - PullRequest
0 голосов
/ 25 января 2012

Для проекта мобильного сайта я столкнулся с проблемой, что (только в браузере Android), градиент прозрачности (гладкое внешнее свечение) не выглядит чистым. Вместо этого вы можете увидеть четкие края вокруг него. Странно, но, кажется, он исчезает, пока я прокручиваю страницу.

http://i.stack.imgur.com/qGmXj.png

Проблема не возникает ни в одном браузере рабочего стола или на устройствах iOS.

Спасибо за вашу помощь!

  • UPDATE:
    Я обнаружил, что проблема называется PNG Banding и возникает только с PNG-24 (24 бит) на 16-битных дисплеях. Поскольку из-за потери качества я не могу использовать 8-битное изображение (которое будет отображаться нормально), я так и не нашел решения проблемы

Ответы [ 2 ]

0 голосов
/ 31 октября 2015

В фотошопе, Save For Web.Выберите PNG-8 бит.Вариант сглаживания: выберите шаблон или шум.Это сгладит градиентную полосу.

0 голосов
/ 05 декабря 2012

Я также не нашел решения этой проблемы.

В моем случае у меня был PNG с градиентом от белого к прозрачному, который я накладывал поверх элементов со сплошным фоновым цветом, чтобы придать им «блеск» вверху. Независимо от того, что я пробовал, в браузере Android всегда будут полосы (и вообще никаких других браузеров).

Еще до того, как я попробовал градиент PNG, я попытался сделать это с помощью CSS3, но у него возникла та же проблема.

В конце концов, я был вынужден создать непрозрачные PNG с градиентным слоем от белого к прозрачному, слитый с цветным слоем. Это означало, что я должен был сделать Photoshop-эквивалент «жесткого кодирования» каждого возможного блеска / тени с любым цветом, на котором он был бы поверх. Не самое лучшее решение, но оно прекрасно отображается в браузере Android без каких-либо ограничений, и мне нужно было сделать что-то , так что да. : |

...