<named-color>

Ключевое слово transparent представляет полностью прозрачный цвет. Это делает фон за цветным элементом полностью видимым. Технически, transparent является сокращением от rgb(0 0 0 / 0%).

Чтобы предотвратить неожиданное поведение, например, в <gradient>, текущий спецификация CSS указывает, что transparent должен быть вычислен в пространстве цветов с предварительным умножением альфа-канала. Однако имейте в виду, что старые браузеры могут интерпретировать его как чёрный с значением альфа 0.

Ключевое слово transparent не было истинным цветом в CSS Level 2 (Revision 1). Это было специальное ключевое слово, которое можно было использовать вместо обычного значения <color> для двух свойств CSS: background и border. По сути, оно было добавлено, чтобы позволить разработчикам переопределять унаследованный твёрдый цвет. С появлением альфа-каналов в CSS Colors Level 3, transparent было переопределено как истинный цвет. Теперь его можно использовать везде, где можно использовать значение <color>.

Все имена определяют цвет в пространстве цветов sRGB. Хотя имена более или менее описывают соответствующие цвета, они по сути искусственные, без строгой логики, лежащей в основе используемых терминов.

Ключевые слова цветов представляют собой обычные твёрдые цвета без прозрачности.

Несколько ключевых слов являются псевдонимами друг друга:

• aqua / cyan
• fuchsia / magenta
• darkgray / darkgrey
• darkslategray / darkslategrey
• dimgray / dimgrey
• lightgray / lightgrey
• lightslategray / lightslategrey
• gray / grey
• slategray / slategrey

Хотя многие ключевые слова были адаптированы из X11, их значения RGB могут отличаться от соответствующего цвета на системах X11, поскольку производители иногда настраивают цвета X11 под своё оборудование.

HTML

<div id="container">
  <div id="one"></div>
  <div id="two"></div>
  <div id="three"></div>
</div>

CSS

#container {
  display: flex;
  justify-content: space-around;
  background-color: darkslateblue;
  padding: 20px;
}

#container > div {
  height: 100px;
  width: 100px;
  margin: 3px;
  border: 2px solid black;
}

#one {
  background-color: red;
}

#two {
  background-color: lavender;
}

#three {
  background-color: transparent;
}

Результат

• <color>: тип данных, чьё определение <named-color> является составной частью.