Разница между RGB и RGBA Rulle в CSS (оба принимают альфа-значение)?

Question

Почему в CSS есть два правила, такие как RGB и RGBA, поскольку оба правила принимают пример альфа-канала:

rgb(0,0,0,0.5);

совпадает с

rgba(0,0,0,0.5);

В чем разница, когда они обапринять значение альфа?

Answer 1

rgb(0, 0, 0, 0.5) никогда не следует использовать, я не совсем уверен, где он был представлен и почему.Но в CSS Color Module Level 4 (Редакция редакции, 23 января 2019 г.) они прямо говорят:

По традиционным причинам rgb () также поддерживает альтернативный синтаксис, который разделяет всеего аргументы с запятыми:

  rgb() = rgb( <percentage>#{3} , <alpha-value>? ) |
          rgb( <number>#{3} , <alpha-value>? )

Так что, возможно, он появился в черновике и был снова удален, но между ними, вероятно, уже были реализованы поставщиками браузеров.

С css2.1 rgb(0, 0, 0, 0.5) недействительно.И также отклонен официальным css-валидатором

с css 3 rgb(0, 0, 0, 0.5) все еще недействителен на основании спецификации:

css-color-3 # rgb-color

Формат значения RGB в функциональной нотации - «rgb (», за которым следует разделенный запятыми список из трех числовых значений (либо трех целочисленных значений, либо трехпроцентные значения) с последующим «)».Целочисленное значение 255 соответствует 100% и F или FF в шестнадцатеричной записи: rgb (255,255,255) = rgb (100%, 100%, 100%) = #FFF.Символы пробела допускаются вокруг числовых значений.

css-validator , кажется, принимает rgb(0, 0, 0, 0.5) и проверяет его как rgb(0 0 0 / 0.5), если выбрана css 3, но этобольше из-за этой устаревшей поддержки.

С CSS Color Module Level 4 (Редакция редакции, 23 января 2019 г.) введен формат rgb(0 0 0 / 0.5):

 rgb() = rgb( <percentage>{3} [ / <alpha-value> ]? ) |
         rgb( <number>{3} [ / <alpha-value> ]? )

По старым причинам rgb () также поддерживает альтернативный синтаксис, который разделяет все его аргументы запятыми:

  rgb() = rgb( <percentage>#{3} , <alpha-value>? ) |
          rgb( <number>#{3} , <alpha-value>? )

Также по старым причинам также существует функция rgba () с идентичной грамматикойи поведение к rgb ().

Так что в соответствии со спецификациями используйте rgb для цветов без альфы и rgba для цветов с альфа до css3.

И после этогоиспользуйте только новый синтаксис, но никогда rgb(0, 0, 0, 0.5).

Таким образом, похоже, что идея состоит в том, чтобы иметь единый синтаксис, используя только rgb и избавиться от rgba в будущем.

Answer 2

Если вы пишете rgb(0, 0, 0, 0.5), некоторые браузеры используют четвертое число, чтобы установить непрозрачность, но некоторые не используют.Если вы хотите, чтобы цвет был непрозрачным, и просмотр отображался во всех браузерах, вам необходимо использовать rgba(0, 0, 0, 0.5)