Должны ли CSS3-градиенты применяться с использованием фонового изображения или только фона?

Question

При использовании CSS3-градиентов мы должны использовать background-image или просто background для их применения?

например:

background: #CCC;
background: -moz-css3-gradient-code;
background: -webkit-css3-gradient-code;

или

background: #CCC;
background-image: -moz-css3-gradient-code;
background-image: -webkit-css3-gradient-code;

Answer 1

Зависит.

Это:

background: #CCC;
background: -moz-css3-gradient-code;
background: -webkit-css3-gradient-code;

будет заменять цвет фона градиентом. Пока это:

background: #CCC;
background-image: -moz-css3-gradient-code;
background-image: -webkit-css3-gradient-code;

сохранит цвет фона там и отобразит градиент над ним.

Я думаю, что стандартное поведение градиентных фонов заключается в том, что браузер заполняет ими область элемента, поэтому во втором примере по умолчанию цвет фона будет скрыт градиентом. Но background-size может изменить это, и градиенты могут быть прозрачными или полупрозрачными (через rgba цвета).

Так что это зависит от того, хотите ли вы, чтобы цвет фона оставался позади градиента в браузерах, которые поддерживают градиент.