В чём разница между background и background-color?

Здравствуйте! Я никак не могу понять разницу между background и background-color, в каких случаях использовать один, а в каких другой? А также не пойму зачем использовать rgb и hsl если можно задавать цвет просто через: #...?
  • Вопрос задан
  • 12663 просмотра
Решения вопроса 1
sergiks
@sergiks Куратор тега Веб-разработка
♬♬
CSS свойство background – это просто сокращение, позволяющее одним значением установить сразу несколько из свойств background-*:
  • background-clip
  • background-color
  • background-image
  • background-origin
  • background-position
  • background-repeat
  • background-size
  • background-attachment

Указанные значения (в любом порядке) устанавливают свойства точно так же, как и отдельные инструкции. Не указанные сохраняют значения по умолчанию.

Таким образом, background: #F90 полностью эквивалентен background-color: #F90

Например, background: #F90 url(fon.jpg) repeat-x равен
background-color: #F90;
background-image: url(fon.jpg);
background-repeat: repeat-x;


Цвета – разные цветовые модели бывают удобны для разных задач. Например, в модели HSL легко «гасить» свет, изменяя только его компоненту L (яркость), или только уменьшая насыщенность S. Или получить палитру из нескольких цветов, одинаково ярких-сочных, но равномерно разбросанных по кругу оттенков, равномерно раскидав их H по цветовому кругу, а S и L оставив одинаковыми.
Ответ написан
Пригласить эксперта
Ответы на вопрос 4
Разница огромная:
background - это целый набор свойств:
background: url(/wp-content/themes/gorbunov_v2/img/review_client_bg.gif) repeat;
    background-image: url(/wp-content/themes/gorbunov_v2/img/review_client_bg.gif);
    background-position-x: initial;
    background-position-y: initial;
    background-size: initial;
    background-repeat-x: repeat;
    background-repeat-y: repeat;
    background-attachment: initial;
    background-origin: initial;
    background-clip: initial;
    background-color: initial;

Вот эта куча лишнего кода пишется если вы используете просто background. В случае с background-color, просто применяется цвет.

По аналогии с font, вы можете указывать так:
font-family: Arial, Sans-serif;
line-height:15px;
font-size:19px;

А можете так:
font: Arial 19px/15px;

По поводу rgb, он полезен тем, если вам нужно задать цвет с прозрачностью. Это лучше чем делать opacity у блока.
Ответ написан
@LiguidCool
В background может входить много чего, в т.ч. цвет.
Насколько помню background-color может переопределить background.
Ответ написан
rishatss
@rishatss
Simple Developer ^)
background-color используется в частности для передачи цвета.

background - можно передать картинку :)
Ответ написан
Комментировать
lebedev444
@lebedev444
https://github.com/wrt2/https-gist.github.com-f036
HTML-target
Ответ написан
Комментировать
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы