Фон-колір - 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.

Демо

Дивіться колір фону пера від CSS-Tricks (@ css-tricks) на CodePen.

Пов’язані

  • фон-вкладення
  • фоновий кліп
  • фонове зображення
  • фон-походження
  • фонове положення
  • фоновий повтор
  • розмір фону

Більше ресурсів

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

Підтримка браузера

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

Chrome Сафарі Firefox Опера IE Android iOS
Працює Працює Працює Працює Працює Працює Працює