Цветовые ключевые слова CSS
На этой странице объясняются ключевые слова transparent
, currentcolor
, и
inherit
.
Прозрачное ключевое слово
Ключевое transparent
слово используется, чтобы сделать цвет прозрачным. Это часто используется для создания прозрачного цвета фона для элемента.
Пример
Здесь цвет фона элемента <div> будет полностью прозрачным, а фоновое изображение просвечивает:
body {
background-image: url("paper.gif");
}
div {
background-color: transparent;
}
Примечание . Ключевое transparent
слово эквивалентно rgba(0,0,0,0). Цветовые значения RGBA являются расширением цветовых значений RGB с альфа-каналом, который определяет непрозрачность цвета. Узнайте больше в нашей главе CSS RGB и в нашей главе CSS Colors .
Ключевое слово текущего цвета
Ключевое currentcolor
слово похоже на переменную, которая содержит текущее значение свойства цвета элемента.
Это ключевое слово может быть полезно, если вы хотите, чтобы определенный цвет был одинаковым для элемента или страницы.
Пример
В этом примере цвет границы элемента <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
слово можно использовать для любого свойства CSS и для любого элемента HTML.
Пример
В этом примере настройки границы <span> будут унаследованы от родительского элемента:
div {
border: 2px solid red;
}
span {
border:
inherit;
}