Прозрачность работает с 8-битными изображениями в формате gif / png - это то, что пиксель либо полностью прозрачен, либо полностью непрозрачен .
На углах круга, где круг прозрачно сливается с фоном, обычно есть пиксели, которые являются полупрозрачными, чтобы сгладить переход. Этот плавный переход не может быть полностью воспроизведен с 8-битными изображениями / PNG.
Один из способов подделки - выбрать фоновый мат для всех этих полупрозрачных пикселей. Это означает, что для тех пикселей, которые не являются полностью прозрачными, их цвет рассчитывается так, как если бы они были поверх матового цвета.
Белые пиксели в вашем GIF круга происходят так, потому что они GIF были созданы для использования на белом фоне. Полупрозрачные пиксели исходного круга растекаются с белым матовым цветом, в результате чего по углам образуются почти белые, но полностью непрозрачные пиксели.
Способ исправить это, если у вас есть оригинальный, полностью прозрачный круг, состоит в том, чтобы save for web & devicesвыбрать матовый цвет, соответствующий вашему фону. Таким образом, потенциально полупрозрачные пиксели будут объединены в полностью непрозрачные пиксели с матовым цветом, и при просмотре на вашем веб-сайте с аналогичным цветом фона он будет выглядеть абсолютно гладким. Обратите внимание, что а) графика с небольшими диапазонами полупрозрачных областей (в пикселях) работает лучше всего, и б) для этого необходимо, чтобы фон, на котором изображен рисунок, представлял собой часть того, что в согласованном цвете, который вы выбираете для своей подложки.
На этом изображении:
- Вверху слева - оригинальная круглая графика с сглаженными углами, т.е. сглаженными.
- Тот же самый результат, который вы получаете с png-24, как видно в правом верхнем углу - но это не работает для анимации.
- Внизу слева показано, как полупрозрачные пиксели графического изображения транспонируются в выбранный красный матовый цвет. Также обратите внимание, что эти полностью прозрачные пиксели остаются полностью прозрачными. Принимая во внимание, что только те пиксели, которые имеют немного прозрачности в них, «подстилаются» с матовым цветом, а полностью непрозрачные пиксели остаются полностью незатронутыми настройками прозрачности (однако они зависят от выбора типа сглаживания и цветов).
- Внизу справа показан вид параметров экспорта, которые использовались для вашего примера изображения. Если выбран белый матовый цвет, те же пиксели, которые показывают красный цвет в нижнем левом изображении, будут показывать белый цвет в нижнем правом изображении. Это вполне приемлемо, если вы показываете это на белом фоне. На других, более темных фонах белые пиксели отображаются, потому что используется неправильный матовый цвет для создания полностью непрозрачных пикселей для любых не полностью прозрачных пикселей.
Посмотрите на оба изображения, экспортированные с красным и белым матовым на этом изображении, на другом фоне. Это показывает, как красный мат приятно сочетается с красным фоном, а также как мешает белый мат на черном фоне.
Если вы попали в неудачную ситуацию, когда у вас нет исходного файла с полными сглаженными альфа-значениями (т. Е. У вас есть только 8-битный GIF-файл), будет неприятно обратить этот матовый растр - попиксельно вы должны удалить матовый цвет из полупрозрачных пикселей, а затем повторно экспортируйте их с более подходящими настройками.
