ZorNet.Ru — сайт для вебмастера » HTML и CSS » Наложение цвета фонового изображения на CSS

Наложение цвета фонового изображения на CSS

Наложение цвета фонового изображения на CSS
Безусловно вы встречали картинки или изображение, где на них наложен прозрачный фон, что оригинально смотрится и все можно сделать на CSS. Также на этот фон можно по вверх наложить знаки, это может быть название или ключевое слово. Здесь думаю вы со мной согласитесь, что создать одну стилистику и наложить один фон на все изображение. Чтобы добавить оверлей цветов к фоновому изображению, будем использовать CSS.

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

Самое замечательное в добавлении фонового изображения наложения, это то, что вы можете просто изменить любое изображение "обычное изображение без фильтра" динамически и опубликовать его на сайте с помощью фильтра, при помощи CSS.

Итак, как это сделать?

Наложение полупрозрачного цвета на background-image

1. Вариант идет как градиент, где можно задать в самом верху и в низу разную палитру. В свойстве background добавляется линейный градиент и URL-адрес изображения, где будет использоваться градиентный фон с прозрачностью.

HTML

Код
<div class="gukisan_lerkim"></div>

CSS

Код
.gukisan_lerkim {
  width: 417px;
  height: 307px;
  background: linear-gradient(
  rgba(234, 91, 17, 0.45),  
  rgba(63, 255, 0, 0.45)),
  url(http://zornet.ru/Aben/ABGDA/zornet_ru/aLK9trm8Rk6KVHwWbj7KVA.png);
}

Вместо использования прозрачного цвета потока, использующего rgba или hsla, где можно использовать градиент. Градиенты технически background-imageс и следовательно не подчиняются правилу.

Демонстрация:

Также можно использовать линейный градиент без прозрачности и добавить режим background-blend-mode: soft-light и добавить знаки. В результате изображение и цвет смешиваются вместе с основным снимком. В отличие от другого способа, которым можно настроить непрозрачным.

Работа CSS3 с множественными фонами

HTML

Код
<div class="surikolen_kamilan">
  <h1>ZorNet: Создание сайта на uCoz</h1>
</div>

Код CSS должен выглядеть так:

Код
.surikolen_kamilan {
  height: 317px;
  background: linear-gradient(#2027b9, #ff00df), url(http://zornet.ru/Aben/ABGDA/zornet_ru/rKAW2DSqSvq3JkLLFqElmQ.png);
  background-size: cover;
  text-align: center;
  background-blend-mode: soft-light;
}

h1 {
  line-height: 278px;
  color: #f7f7f7;
  font-size: 37px;
  margin: auto
}

В заключение добавление эффекта цветового фильтра может быть выполнено двумя способами. Первый - это свойство фона с линейным градиентом и URL-адресом изображения.

Демонстрация:

Другой, это добавить сплошной цвет в параметр линейного градиента и добавить свойство background-blend-mode плюс заголовок.

PS - сделай свой сайт интересным по цветовой гамме. Здесь цветовая гамма выбрана наугад, чтоб показать как работает.
26 Декабря 2017 Просмотров: 4851 Комментариев: (2)

Поделиться в социальных сетях

Материал разместил

Оставь свой отзыв

Комментарии: 2
ansemak02
ansemak02 15 Июня 2022 09:491
0
Спасибо!!! 11a
Kosten
Kosten 15 Июня 2022 13:062
0
Всегда пожалуйста, думаю после эффекта сайт безусловно преоброзиля.
avatar