Блог веб разработки

Блог веб-разработки статьи | видеообзоры | исходный код

mix-blend-mode css

Здравствуйте друзья и сегодня мы рассмотрим свойство css с помощью которого можно осуществлять наложение слоев друг на друга.

Допустим у нас есть следующий код:

<style>
.block{
    background:url('fon.jpg') left top no-repeat;
    background-size:100%;
}
</style>
<div class="block">
    <img src="image.jpg"/
</div>

Здесь у нас в элементе 'block' размещена некая картинка в формате jpg.

Режимы наложения слоев в css

Элемент 'block' имеет фон в виде градиента который уж никак не сочетается с нашей картинкой jpg.

Для этого мы можем прибегнуть к наложению нашей картинки на слой фона.

Процессы наложения слоев в css осуществляются через свойство mix-blend-mode которое имеет множество значений:

multiply | screen | overlay | color-dodge | color-burn | difference | hue | color | luminosity | saturation и т. п. Все мы конечно рассматривать не будем. Некоторые из них довольно специфичны.

Итак вернемся к решению нашей проблемы. Для этого нам достаточно картинке прописать свойство mix-blend-mode со значением multiply.

img{
    mix-blend-mode: multiply;
}
mix-blend-mode:multiply в css

В результате фон картинки стал таким же как фон элемента.

Используя значение screen мы можем получить обратный эффект:

img{
    mix-blend-mode: screen;
}
mix-blend-mode: screen в css

Здесь у нас при наложении слоев фон элемента 'block' отобразился в виде контуров картинки.

При overlay:

img{
    mix-blend-mode: overlay;
}
mix-blend-mode: overlay в css

Далее для наглядности наложения слоев лучше взять фотографию и поиграться с ней.

Режимы наложения слоев в css фотография

А теперь поехали! Применим значение color-burn:

img{
	mix-blend-mode: color-burn;
}
mix-blend-mode:color-burn в css
img{
     mix-blend-mode:difference;

}
mix-blend-mode: difference в css
img{
	mix-blend-mode:hue;
}
mix-blend-mode: hue в css
img{
 mix-blend-mode:color;
}
mix-blend-mode: color в css
img{
    mix-blend-mode:saturation;
}
mix-blend-mode:saturation в css

На этом данная статья подошла к концу.

Как видите свойство mix-blend-mode помогает нам создавать полезные и необычные эффекты при наложении слоев. Некоторые из них довольно специфичны.

Дополнительную информацию о работе со свойством mix-blend-mode вы можете получить на Хабре https://habrahabr.ru/post/223893/ .

А я желаю вам творческих успехов и удачи! Пока!

Оцените статью

Еще статьи

PHP буфер

marquee html

requests python

clip path css

phpQuery php

Типы параметров функций и методов в php7

FileSystem api

css zoom

Php zip

Комментарии

Проверочный код

В данном разделе пока нет комментариев!

История

    ПОДПИСКА

    • Подпишись и получай информацию о выходе новых статей на почту! Просто введите свою почту, нажмите кнопку подписаться. На почту должно будет прийти сообщение с потверждением подписки. Если сообщение не пришло проверьте раздел спам или попробуйте другую почту. Также по всем техническим проблемам вы можете написать в поддержку

    НОВОСТИ

    • Всем привет! Запустил новый сервис для поиска и бесплатного скачивания, прослушивания аудиокниг. Здесь вы можете найти множество литературы и прослушать ее. Вскоре возобновлю написание статей.