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 з альфа-каналом, який визначає непрозорість кольору. Докладніше читайте в розділі CSS RGB та в розділі CSS Кольори на нашому сайті W3Schools українською.
Ключове слово currentcolor (поточний колір)
Ключове слово currentcolor схоже на змінну, яка містить поточне значення властивості кольору елементу.
Це ключове слово може бути корисне, якщо ви хочете, щоб визначений колір був узгоджений в елементі або на сторінці.
Приклад
В цьому прикладі колір межі елемента <div> буде синім, тому що колір тексту елемента <div> синій:
div {
color: blue;
border: 10px solid currentcolor;
}
Спробуйте самі »
Приклад
В цьому прикладі колір фону <div> встановлено на поточне значення кольору основного елемента:
body {
color: purple;
}
div {
background-color: currentcolor;
}
Спробуйте самі »
Приклад
В цьому прикладі колір межі та колір тіні <div> встановлено на поточне значення кольору основного елемента:
body {
color: green;
}
div {
box-shadow: 0 0 15px currentcolor;
border: 5px solid currentcolor;
}
Спробуйте самі »
Ключове слово inherit (наслідування)
Ключове слово inherit визначає, що властивість має наслідувати своє значення від батьківського елемента.
Ключове слово inherit може використовуватись для будь-якої CSS-властивості та для будь-якого HTML-елемента.
Приклад
В цьому прикладі налаштування межі <span> будуть наслідувані від батьківського елементу:
div {
border: 2px solid red;
}
span {
border: inherit;
}
Спробуйте самі »
