Ключевые слова цветов CSS

Эта глава объяснит transparent、currentcolor и inherit ключевое слово.

ключевое слово transparent

transparent Ключевое слово используется для создания прозрачного цвета. Это обычно используется для установки прозрачного фона для элементов.

Пример

В этом примере, цвет фона элемента <div> будет полностью прозрачным, и будет видна фоновая изображение:

body {
  background-image: url("paper.gif");
}
div {
  background-color: transparent;
}

Попробуйте сами

Внимание:transparent ключевое слово эквивалентно rgba(0,0,0,0)RGBA-цвет является расширением RGB-цвета, который включает канал alpha - он определяет непрозрачность цвета. Для получения дополнительной информации обратитесь к нашей CSS RGB разделы и Цвета CSS раздел

ключевое слово currentcolor

currentcolor Ключевое слово подобно переменной, которая сохраняет текущее значение атрибута color элемента.

Если вы хотите, чтобы определенный цвет оставался постоянным для элемента или страницы, этот ключевое слово будет очень полезным.

Пример

В этом примере, цвет рамки элемента <div> будет синим, потому что цвет текста элемента <div> также синий:

div {
  color: blue;
  border: 10px solid currentcolor;
}

Попробуйте сами

Пример

В этом примере, цвет фона элемента <div> установлен в текущее значение цвета элемента body:

body {
  color: purple;
}
div {
  background-color: currentcolor;
}

Попробуйте сами

Пример

В этом примере, цвет рамки и цвет тени <div> установлены в текущий цвет значения элемента body:

body {
 color: green;
}
div {
  box-shadow: 0px 0px 15px currentcolor;
  border: 5px solid currentcolor;
}

Попробуйте сами

Ключевое слово inherit

inherit Ключевое слово указывает, что свойство должно наследовать значение от родительского элемента.

inherit Ключевые слова могут использоваться для любого свойства CSS и могут применяться к любому элементу HTML.

Пример

В этом примере, настройка рамки <span> будет inheritance от родительского элемента:

div {
  border: 2px solid red;
}
span {
  border: inherit;
}

Попробуйте сами