Браузерная обработка CSS «прозрачного» в градиентах - PullRequest
Новая
       30

Браузерная обработка CSS «прозрачного» в градиентах

6 голосов
/ 30 августа 2011

Хотя цвета CSS rgba(255,255,255,0) и rgba(0,0,0,0), по-видимому, одинаковы, т. Е. transparent, при рассмотрении в виде простых цветов они влияют на промежуточные цвета в градиентах: 

linear-gradient(left center, rgba(0,0,0,0), rgba(255,255,255,1))

Этовыдает серые полупрозрачные тона между двумя концами.

Теперь мои вопросы:

  1. Браузеры автоматически выбирают «правильный» цвет для transparent или это фиксированный цвет?(скорее всего «черный прозрачный» или «белый прозрачный»)?

  2. Отличается ли это между браузерами?

1 Ответ

6 голосов
/ 30 августа 2011

  1. Хотя модуль Color заявляет , что transparent означает то же самое, что и rgba(0, 0, 0, 0), цвета ведут себя немного по-другому в CSS-градиентах. Модуль значений изображения указывает, что цветовые остановки должны быть интерполированы в предварительно умноженном цветовом пространстве RGBA.Это означает, что браузеры должны сохранять цвета RGB во время переходов между цветовыми остановками и что там не должно быть серых полупрозрачных тонов.

  2. По состоянию на конец октября 2012 года,Только IE10 и Opera выполняют эту интерполяцию правильно, так что серые участки отсутствуют, и вы получаете чистый белый 0% -100% альфа-градиент.Другие браузеры отображают серые части, что неверно.

...