Как совместить фоновое изображение и градиент CSS3 на одном элементе?

Если вы также хотите задать позицию фона для вашего изображения, вы можете использовать следующий код:

background-color: #444; // запасной вариант
background: url('PATH-TO-IMG') center center no-repeat; // запасной вариант

background: url('PATH-TO-IMG') center center no-repeat, -moz-linear-gradient(top, @startColor, @endColor); // FF 3.6+
background: url('PATH-TO-IMG') center center no-repeat, -webkit-gradient(linear, 0 0, 0 100%, from(@startColor), to(@endColor)); // Safari 4+, Chrome 2+
background: url('PATH-TO-IMG') center center no-repeat, -webkit-linear-gradient(top, @startColor, @endColor); // Safari 5.1+, Chrome 10+
background: url('PATH-TO-IMG') center center no-repeat, -o-linear-gradient(top, @startColor, @endColor); // Opera 11.10
background: url('PATH-TO-IMG') center center no-repeat, linear-gradient(to bottom, @startColor, @endColor); // Стандарт, IE10

либо вы можете создать LESS миксин в стиле Bootstrap:

#gradient {
    .vertical-with-image(@startColor: #555, @endColor: #333, @image) {
        background-color: mix(@startColor, @endColor, 60%); // запасной вариант
        background-image: @image; // запасной вариант

        background: @image, -moz-linear-gradient(top, @startColor, @endColor); // FF 3.6+
        background: @image, -webkit-gradient(linear, 0 0, 0 100%, from(@startColor), to(@endColor)); // Safari 4+, Chrome 2+
        background: @image, -webkit-linear-gradient(top, @startColor, @endColor); // Safari 5.1+, Chrome 10+
        background: @image, -o-linear-gradient(top, @startColor, @endColor); // Opera 11.10
        background: @image, linear-gradient(to bottom, @startColor, @endColor); // Стандарт, IE10
    }
}

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

Вы можете просто ввести следующий код:

background: linear-gradient(
    to bottom,
    rgba(0, 0, 0, 0),
    rgba(0, 0, 0, 100)
  ), url(../images/image.jpg);

Это создаст фоновый градиент, который плавно переходит от прозрачного черного к непрозрачному черному и накладывает изображение image.jpg из папки images. Обратите внимание, что значение альфа-канала в rgba(0, 0, 0, 100) должно быть скорректировано, поскольку оно превышает допустимый диапазон (0-1). Вероятно, вы хотели использовать rgba(0, 0, 0, 1) для полного черного цвета.

Ваше решение выглядит вполне разумно. Вы используете свойство background-image, чтобы сначала задать запасное изображение (fallback), а затем добавляете линейный градиент поверх этого изображения. Таким образом, если изображение не загрузится, будет показан только градиент.

Вот как выглядит ваш код для применения градиента:

background-image: url(IMAGE_URL); /* запасное изображение */

background-image: linear-gradient(to bottom, rgba(0,0,0,0.7) 0%, rgba(0,0,0,0.7) 100%), url(IMAGE_URL);

Правильный порядок следования свойств background-image важен, так как браузер будет использовать последнее указанное изображение. Если вы хотите, чтобы градиент оказался над изображением, то ваш код работает корректно. Однако стоит отметить, что если IMAGE_URL недоступно, градиент останется единственным фоном. Если это именно тот эффект, который вы хотите достичь, то решение действительно хорошее.

Я реализовал подход, который позволяет улучшить работу с изображениями в CSS, и хотел бы поделиться своим решением. Приведенный ниже код выполняет ту же задачу, но использует SASS, Bourbon и спрайт изображений.

@mixin sprite($position) {
    @include background(url('image.png') no-repeat ($position), linear-gradient(#color1, #color2));
}

a.button-1 {
    @include sprite(0 0);
}

a.button-2 {
    @include sprite(0 -20px);  
}

a.button-3 {  // Здесь исправлено название селектора
    @include sprite(0 -40px);  
}

SASS и Bourbon обрабатывают кросс-браузерные префиксы, и теперь мне нужно просто указать позицию спрайта для каждой кнопки. Этот подход легко расширить для состояний активных кнопок и эффектов наведения.

Если вы хотите добавить градиент с единственным фоновым изображением по центру, вы можете сделать это с помощью одной строки кода, как показано ниже:

body {
  background: url(logo.png) no-repeat fixed center center, linear-gradient(#00467f, #a5cc82) fixed;
}

Данная конструкция применяет фоновое изображение logo.png, которое располагается по центру, и накладывает на него градиент от цвета #00467f к цвету #a5cc82. Обратите внимание, что оба слоя фиксированы, что позволяет им оставаться на месте при прокрутке страницы.