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

Question

[Максим Ладный]

Здравствуйте! Я никак не могу понять разницу между background и background-color, в каких случаях использовать один, а в каких другой? А также не пойму зачем использовать rgb и hsl если можно задавать цвет просто через: #...?

Answer 1

[Сергей Соколов]

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 оставив одинаковыми.

Answer 2

[Алексей Скляров]

Разница огромная:
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 у блока.

Comments

[Сергей Соколов]

hsla() тоже позволяет задать alpha-прозрачность цвету, как и rgba()

[Алексей Скляров]

Сергей Соколов: про hsla я ничего не говорил, ограничился отличием обычного hex кода и rgba

[Сергей Соколов]

Алексей Скляров: hex-кодом прозрачность тоже задаётся: #bbff0077 – 7-8 символами, или #F90E – четвёртым. Поддерживается всеми современными браузерами, входит в спецификацию CSS4.

[Сергей Соколов]

upd. не все браузерами – Microsoft, как всегда, не в теме.

[Алексей Скляров]

Сергей Соколов: увы CSS4 спецификацию не смотрел. поэтому и не рассматривал этот вариант вообще, спасибо за полезную инфу

Answer 3

[Иван]

В background может входить много чего, в т.ч. цвет.
Насколько помню background-color может переопределить background.

Comments

[Максим Ладный]

Получается background-color сильнее background?

[Иван]

Максим Ладный: тут также как padding и padding-left например.

[Максим Ладный]

Понял, cпасибо.

[Сергей Соколов]

Максим Ладный: не сильнее – они равны, но важен их порядок, последний переигрывает предыдущий.

Answer 4

[Ришат Султанов]

background-color используется в частности для передачи цвета.

background - можно передать картинку :)

Answer 5

[Alexander Lebedev]

HTML-target