Фоновые изображения с наложением, это очень распространенная функция пользовательского интерфейса. Так как градиенты, это просто значение свойства фона, если рассматривать намного подробнее, то вы обнаружите, что на самом деле устанавливается свойство background-image.
Сначала давайте создадим наш элемент баннера, к которому мы применим наше фоновое изображение и наложение градиента. Мы также добавим дополнительную обертку содержимого для элементов, где находятся внутри нашего баннера, на которые мы будем ссылаться позже.
С изображением:
HTML
Код
<div class="melkova-gumdan"></div>
CSS
Код
.melkova-gumdan {
width: 100vw;
height: 100vh;
position: relative;
background: url('Ссылка на фон') center center no-repeat;
background-size: cover;
}
.melkova-gumdan:before {
content: '';
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
background-color: #000000;
opacity: .6;
}
Чтобы применить наше наложение градиента, будем использовать псевдоэлемент. Мы абсолютно позиционируем оверлей, чтобы покрыть 100% ширину и высоту нашего баннера.
Демонстрация
Второй вариант:
Так как мы применяем градиентное наложение с псевдоэлементом, у вас иногда будут проблемы с содержимым внутри баннера, отображаемым под градиентным наложением.
Здесь добавлено больше градиентов, что можно сделать одну сторону в синей палитре, а другую в зеленой, вообщем поиграть с оттенками цвета.
HTML
Код
<div class="kesagtu-kamlopuged"></div>
CSS
Код
.kesagtu-kamlopuged {
position: relative;
width: 100%;
height: 100%;
background: url('Ссылка на фон') center center no-repeat;
background-size: cover;
}
.kesagtu-kamlopuged:before {
content: '';
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
background-image: linear-gradient(to bottom right,#071f2d,#ef826e);
opacity: .6;
}
Как отмечено в первом комментарии, вы можете опустить псевдоэлемент и использовать несколько фонов. Это также прекрасно работает, но устраняет возможность анимации градиента при наведении, что может быть обычным делом.
Демонстрация
