Свойството background-color в CSS прилага плътни цветове като фон на елемент. Ето пример:
html ( background-color: #82a43a; )Примерът, използван по-горе ( #82a43a), се нарича шестнадесетичен код и това е един от няколкото начина, по които CSS трябва да представя един цвят. Има редица начини да намерите правилните шестнадесетични кодове. Всеки, който е използвал инструмент за проектиране, е виждал избор на цвят, подобен на този:
Шестнадесетичните кодове са един от начините за деклариране на цвят в CSS. Има и цял куп имена, които можете да използвате, например:
.page-wrap ( background: white; ) footer ( background: black; ) .almonds ( background: blanchedAlmond; )Тези цветове не са много гъвкави, но те могат да бъдат полезни само за малко. По-лесно се запомнят от шестнадесетичните кодове и има много от тях.
Друг начин за деклариране на цвят е използването на RGB, RGBa, HSL или HSLa:
#page-wrap ( background: rgba(0, 0, 0, 0.8); /* 80% Black */ ) .widget ( background: hsla(170, 50%, 45%, 1); )За разлика от шестнадесетичните кодове, тези стойности позволяват прозрачност (алфа), което може да бъде супер полезно. Научете повече за RGBa или HSLa.
Демонстрация
Вижте цвета на фона на писалката от CSS-Tricks (@ css-tricks) на CodePen.
Свързани
- фон-прикачен файл
- фонов клип
- фоново изображение
- фон-произход
- фон-позиция
- фон-повторение
- размер на фона
Още ресурси
- CSS3 спецификация
- MDN
Поддръжка на браузър
Шестнадесетичните кодове и повечето имена на цветове работят навсякъде. RGBa и HSLa имат свои собствени поддръжки на браузър: RGBa и HSLa.
| Chrome | Сафари | Firefox | Опера | IE | Android | iOS |
|---|---|---|---|---|---|---|
| Върши работа | Върши работа | Върши работа | Върши работа | Върши работа | Върши работа | Върши работа |