Цвет фона - CSS-хитрости

Anonim

Свойство 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.

Демо

См. Pen background-color от CSS-Tricks (@ css-tricks) на CodePen.

Связанный

  • фоновое приложение
  • фоновый клип
  • фоновая картинка
  • фон-происхождение
  • фоновая позиция
  • фон-повтор
  • размер фона

Дополнительные ресурсы

  • Спецификация CSS3
  • MDN

Поддержка браузера

Шестнадцатеричные коды и большинство названий цветов работают везде. RGBa и HSLa имеют свои собственные наборы поддержки браузеров: RGBa и HSLa.

Хром Сафари Fire Fox Опера IE Android iOS
Работает Работает Работает Работает Работает Работает Работает