Как задать прозрачность цвета в CSS

«Как задать прозрачность цвета в CSS» — вопрос из категории CSS, который задают на 10% собеседований Frontend Разработчик. Ниже — развёрнутый ответ с разбором ключевых моментов.

Ответ

Да, можно добавить прозрачность к HEX-цвету, используя 8-значный формат (HEX + альфа-канал). Последние два символа определяют прозрачность (00 — полностью прозрачный, FF — непрозрачный).

Пример:

.element {
  background-color: #FF000080; /* Красный с 50% прозрачностью */
}

Если нужен 6-значный HEX, можно использовать rgba() или hsla(), конвертировав HEX в RGB:

.element {
  background-color: rgba(255, 0, 0, 0.5); /* Тот же полупрозрачный красный */
}

Поддержка 8-значного HEX есть в современных браузерах, но для старых версий лучше использовать rgba().