Наложение цвета фонового изображения на CSS
 | |
| Безусловно вы встречали картинки или изображение, где на них наложен прозрачный фон, что оригинально смотрится и все можно сделать на CSS. Также на этот фон можно по вверх наложить знаки, это может быть название или ключевое слово. Здесь думаю вы со мной согласитесь, что создать одну стилистику и наложить один фон на все изображение. Чтобы добавить оверлей цветов к фоновому изображению, будем использовать CSS. Прежде всего на добавление наложения фонового изображения CSS, это самый динамичный способ создания тонированных изображений страниц. Он стал популярным для многих веб сайтов, которые появляются на главной странице в качестве баннеров. Самое замечательное в добавлении фонового изображения наложения, это то, что вы можете просто изменить любое изображение "обычное изображение без фильтра" динамически и опубликовать его на сайте с помощью фильтра, при помощи CSS. Итак, как это сделать?  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 и добавить знаки. В результате изображение и цвет смешиваются вместе с основным снимком. В отличие от другого способа, которым можно настроить непрозрачным.  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 - сделай свой сайт интересным по цветовой гамме. Здесь цветовая гамма выбрана наугад, чтоб показать как работает. | |
Поделиться в социальных сетях
Материал разместил
| Комментарии: 2 | |
|
| |
