• Страница 1 из 1
  • 1
Форум » Web-Раздел » Начинающему вебмастеру » Градиенты поверх фоновой изображение на CSS (Полупрозрачный градиент фонового изображения с помощью CSS)
Градиенты поверх фоновой изображение на CSS
Kosten
Дата: Воскресенье, 2019-05-05, 01:16 | Сообщение 1
Администраторы
Сообщений:21624
Награды: 56


Фоновые изображения с наложением, это очень распространенная функция пользовательского интерфейса. Так как градиенты, это просто значение свойства фона, если рассматривать намного подробнее, то вы обнаружите, что на самом деле устанавливается свойство 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;
  }

Как отмечено в первом комментарии, вы можете опустить псевдоэлемент и использовать несколько фонов. Это также прекрасно работает, но устраняет возможность анимации градиента при наведении, что может быть обычным делом.

Демонстрация
Прикрепления: 0845059.jpg(22.2 Kb) · 5066606.jpg(28.1 Kb)
Страна: (RU)
Форум » Web-Раздел » Начинающему вебмастеру » Градиенты поверх фоновой изображение на CSS (Полупрозрачный градиент фонового изображения с помощью CSS)
  • Страница 1 из 1
  • 1
Поиск: