Следует ли использовать rgba(0, 0, 0, 0, 0) или rgba(255, 255, 255, 0) для прозрачности в CSS?

Следует ли использовать rgba(0, 0, 0, 0, 0) или rgba(255, 255, 255, 0) для прозрачности в CSS?

Каковы плюсы и минусы каждого из них?

Комментарии к вопросу (2)
Решение

Последний параметр функции rgba() - это параметр "альфа" или "непрозрачность". Если вы установите его в 0, это будет означать "полностью прозрачный", а первые три параметра (каналы red, green и blue) не будут иметь значения, потому что вы все равно не сможете увидеть цвет.

Учитывая это, я бы выбрал rgba(0, 0, 0, 0, 0), потому что:

  1. он меньше печатает,
  2. это сохранит несколько лишних байт в вашем CSS-файле, и
  3. вы увидите очевидную проблему, если значение альфа изменится на что-то нежелательное.

Вы можете вообще избежать модели rgba и использовать вместо нее ключевое слово transparent, которое, согласно w3.org, эквивалентно "прозрачному черному" и должно вычисляться как rgba(0, 0, 0, 0, 0). Например:

h1 {
    background-color: transparent;
}

Это сэкономит вам еще пару байт, в то время как ваши намерения использовать прозрачность очевидны (в случае, если кто-то не знаком с RGBA).

Начиная с CSS3, вы можете использовать ключевое слово transparent для любого свойства CSS, которое принимает цвет.

Комментарии (0)

Существует два способа хранения цвета с альфа-каналом. Первый - точно так, как вы видите, с каждым компонентом как есть. Второй - использовать предварительное умножение альфы, когда значения цвета умножаются на альфу после преобразования в диапазон 0.0-1.0; это делается для облегчения композитинга. Обычно вы не должны замечать или заботиться о том, какой способ реализован в том или ином движке, но есть угловые случаи, когда это может понадобиться, например, если вы попытаетесь увеличить непрозрачность цвета. Если вы используете rgba(0, 0, 0, 0, 0), вы с меньшей вероятностью увидите разницу между двумя подходами.

Комментарии (1)

Есть небольшая разница, когда вы используете rgba(255,255,255,a), цвет фона становится все более и более светлым по мере увеличения значения 'a' от 0.0 до 1.0. В то время как при использовании rgba(0,0,0,a) цвет фона становится все более темным по мере увеличения значения 'a' от 0.0 до 1.0. При этом очевидно, что и (255,255,255,0), и (0,0,0,0) делают фон прозрачным. (255,255,255,1) сделает фон полностью белым, в то время как (0,0,0,0,1) сделает фон полностью черным.

Комментарии (5)