Почему свойство background «затмевает» свойство background-color?

Question

[webrapist]

Привет.

Есть код:

.download-buttom {
  border: 1px solid transparent;
  background: -webkit-linear-gradient(bottom, #87C03B, #98D647);
  border-radius: 24px;
  display: inline-block;
  height: 50px;
  margin-top: 40px;
  width: 240px;
}

.download-buttom:hover {
  background-color: #3C3C3C;
  border: 1px solid #4694FF;
  box-sizing: border-box;
}

https://codepen.io/webrapist/pen/wGjRXp

При таком раскладе при hover-эффекте фон не меняется. Почему? Ведь стиль background-color ниже в файле, а значит приоритетнее, так ведь? Если в первом блоке объявления вместо фона-градиента поставить обычный цвет - то всё работает как надо. Или же можно во втором блоке объявлений вместо background-color написать просто background - тоже всё отлично работает.

Может кто объяснить этот момент?

Answer 1

[Дмитрий Кравченко]

background: -webkit-linear-gradient(bottom, #87C03B, #98D647);

такую запись браузер читает как

background-image: -webkit-linear-gradient(bottom, #87C03B, #98D647);

background-color меняетcя, но под градиентом этого не видно. Можете проверить, поставив один из цветов в transparent;

Comments

[webrapist]

Я думал, что градиент - это цвет. Спасибо.

Answer 2

[Ксения Михайлова]

Возможно, потому что background является сборным свойством:

background: [background-attachment || background-color || background-image || background-position || background-repeat]

в background включен background-image (gradient). При hover цвет меняется, но он меняется под градиентом. Поэтому этого не видно.

Comments

[webrapist]

И что? Я читал, что свойство background устанавливает некоторые значения, а те, что не установлены - определяет по умолчанию. Исходя из этого, я не могу понять, почему строчка background-color: color; не переопределяет цвет фона, ведь приоритет то выше у неё должен быть, т.к. расположена ниже в css-файле. Да и это происходит только тогда, когда в верхнем блоке в свойстве указан фон в виде градиента.

[Ксения Михайлова]

swibong: у вас в background включен background-image (gradient). При hover цвет меняется, но он меняется под градиентом. Поэтому этого не видно.

[webrapist]

Ксения Михайлова: Да, уже ответили. Я думал, что градиент - это background-color