Применение фильтра CSS к фоновому изображению

Применение фильтра CSS к фоновому изображению

От автора: вы можете легко применить в CSS фильтры изображений и других элементов с помощью свойства filter. Но что, если вы хотите применить фильтр только к фону элемента? Это довольно сложно.

Существуют свойства CSS, специфичные для фона, например background-blend-mode, но смешивание и фильтры — это не одно и то же. Это похоже на то, что у нас есть backdrop-filter, но не совсем. Это выполняет фильтрацию, поскольку фон взаимодействует с тем, что находится за элементом.

К сожалению, background-filter не существует. И что нам делать?

Использовать псевдо-элемент вместо фона

Если вы поместите содержимое элемента во внутреннюю оболочку, вы можете установить ее поверх псевдо-элемента, который просто выполняет роль фона.

Практический курс по верстке адаптивного сайта с нуля!

Изучите курс и научитесь верстать современные сайты на HTML5 и CSS3

Узнать подробнее

Посмотрите, как «фон» фильтруется в grayscale? Мы вызвали grayscale и применили его только к псевдо-элементу, оставив остальную часть содержимого нефильтрованной.

Все зависит от того, какой фильтр вы хотите применить… вы могли бы имитировать его с помощью режимов смешивания
Я столкнулся с этой проблемой, поскольку специально пытался задать оттенки серого для фонового изображения элемента. Поскольку, как мы уже поняли, для этого нет конкретного свойства, я подумал о background-blend-mode, особенно о том, какие существуют варианты смешивания для таких вещей, как насыщенность и цвет. Если бы я мог установить чистый черный поверх графики, тогда я мог бы смешать их, как это делается для нескольких фонов — и, по сути, я имитировал бы эффект оттенков серого.

Обратите внимание, что при работе с несколькими фонами вы не можете использовать сплошной цвет сам по себе (это будет фоновый цвет, а не фоновое изображение), поэтому мы должны использовать линейный градиент без перехода.

Исследования Дэна Уилсона

Дэн плотно занялся этим вопросом и сделал Pen, в котором есть три слоя:

Верхний слой: виньетка с radial-gradient

Средний слой: сплошной цвет

Нижний слой: графический рисунок

Вы можете настроить цвета, используемые для двух верхних слоев, и применить различные режимы смешивания к каждому из них. Это была еще одна вещь, которую я узнал! Так же, как вы можете через запятую использовать несколько фонов (а также для background-size, background-position и т. д., чтобы применить эти значения к конкретным фонам), вы также можете через запятую использовать background-blend-mode, чтобы применить различные эффекты смешивания к каждому слою.

Автор: Chris Coyier

Источник: https://css-tricks.com/

Редакция: Команда webformyself.

Практический курс по верстке адаптивного сайта с нуля!

Изучите курс и научитесь верстать современные сайты на HTML5 и CSS3

Узнать подробнее

Курс по CSS3

Прямо сейчас изучите CSS3 с нуля!

Смотреть курс

Метки:

Похожие статьи:

Комментарии Вконтакте:

Комментарии Facebook:

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *

Можно использовать следующие HTML-теги и атрибуты: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code class="" title="" data-url=""> <del datetime=""> <em> <i> <q cite=""> <strike> <strong> <pre class="" title="" data-url=""> <span class="" title="" data-url="">

Я не робот.

Spam Protection by WP-SpamFree