background-blend-mode в CSS


Содержание

15 вариантов стилизации фотографий с помощью CSS3

Большинство людей для обработки изображений используют Adobe Photoshop. Помимо всех преимуществ, в этой программе есть еще один весомый плюс, который дает ей возможность опережать конкурентов – режимы наложения слоев, или blending modes.

Такие режимы позволяют создавать интересные эффекты, смешивая несколько слоев. Кто хоть раз пользовался этой функцией в Adobe Photoshop, знает, какие широкие возможности она предоставляет. Но знаете ли вы, что режимы смешивания также доступны и в CSS? Сегодня мы рассмотрим это на примерах.

Поддержка браузерами

На сегодняшний день около 50% используемых браузеров поддерживают свойство background-blend-mode , включая новые версии Google Chrome, Opera и Mozilla Firefox. Браузер Internet Explorer на данный момент не отображает эти эффекты. Список версий браузеров можно просмотреть на сайте caniuse.com.

Как использовать режим наложения CSS3

С помощью свойства background-blend-mode можно смешать два изображения либо изображение и фон. Термин «основной цвет» означает исходный в изображении цвет, «совмещенный» – цвет, который накладывается, «результирующий» – цвет, полученный в результате наложения. Мы будем смешивать фотографию caracal.jpg и однотонный фон #eac071 . Для этого зададим класс blend и создадим основной «каркас» CSS:

Теперь можно создавать режимы смешивания, добавляя еще один класс и стиль. Ниже приведено 15 примеров.

Color Burn (затемнение основы)

Этот режим затемняет базовые цвета, делая картинку более контрастной. Создаем класс burn и прописываем стиль:

Color (цвет)

Яркость основного цвета + насыщенность и цветовой тон совмещенного цвета = результат режима Color.
Color проявляет себя лучше всего при раскраске монохромных изображений.

Darken (замена темным)

Здесь из двух пикселей выбирается тот, который является более темным. Если основной цвет пикселя более светлый, чем у совмещенного, он заменяется более темным пикселем. Остальные пиксели не изменяются. При применении белого цвета результат не виден.

Difference (разница)

В режиме Difference вычитаются пиксели либо основного, либо совмещенного цвета. Это зависит от того, какой из них будет более ярким. Смешивание с черным цветом результата не дает, а при смешивании с белым основные цвета инвертируются.

Color Dodge (осветление основы)

Фильтр осветляет картинку и делает ее менее контрастной за счет замены основного цвета более ярким.

Exclusion (исключение)

Exclusion схож с режимом Difference, но изображение становится менее контрастным. Смешивание с белым и черным цветами приводит к аналогичным результатам, что и в Difference.

Hard Light (жесткий свет)

При необходимости осветлить или затемнить некоторые участки изображения используйте этот режим. Принцип его работы таков: если совмещенный цвет более темный, чем 50% серого, картинка затемняется. Если же совмещенный цвет светлее 50% серого, то картинка, соответственно, становится более светлой.

Hue (цветовой тон)

Режим Hue сочетает насыщенность и яркость основного цвета с цветовым тоном совмещенного.

Lighten (замена светлым)

В этом режиме картинка становится светлее. Выбираются те цвета, которые являются более светлыми.

Luminosity (яркость)

Luminosity – противоположность режиму Color. Здесь сочетается яркость совмещенного цвета с цветовым тоном и насыщенностью основного.

Multiply (умножение)

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

Overlay (перекрытие)

При смешивании основного и совмещенного цветов яркие цвета осветляются, а темные – затемняются.


Saturation (насыщенность)

Светимость и цветовой тон основного цвета сочетается с насыщенностью совмещенного цвета.

Screen (осветление)

В этом режиме картинка становится более светлой. Смешивая изображение с белым цветом, в результате получится белый цвет. Черный цвет результата не дает.

Soft Light (мягкий свет)

В зависимости от совмещенного цвета, изображение станет либо светлее, либо темнее. Работа режима схожа с Hard Light, только здесь в результате получается более мягкий свет.

Подобрав подходящие для смешивания цвета, можно без использования Adobe Photoshop добиться красивых эффектов, которые оживят ваши изображения. Вы можете скачать архив с файлами, чтобы просмотреть исходники и лучше ознакомиться с материалом. Желаем творческих успехов!

background-blend-mode

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

Собственно, режимы наложения позаимствованы из фотошопа:
— normal
— multiply
— screen
— overlay
— darken
— lighten
— color-dodge
— color-burn
— hard-light
— soft-light
— difference
— exclusion
— hue
— saturation
— color
— luminosity

Демо и краткое описание режимов

Режимы смешивания цветов, разумеется, действуют только в том случае, если в наличии имеются хотя бы два фоновых изображения, наложенных друг на друга. Для примера возьмем две картинки:

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

background-blend-mode:normal

верхний фон полностью закрывает нижний

background-blend-mode:multiply

умножение цветов — перемножает значения каждого канала обоих цветов, белый цвет пропадает

background-blend-mode:screen

противоположность режима multiply
инвертирует значение каждого канала обоих цветов, перемножает их, а результат снова инвертирует
черный цвет пропадает

background-blend-mode:overlay

совмещает два предыдущих режима
умножает темные пиксели, от чего они становятся еще темнее, и применяет режим screen к светлым, от чего они светлеют еще больше, таким образом, контраст усиливается

background-blend-mode:soft-light

принцип работы такой же, как у предыдущего, но результат немного отличается

background-blend-mode:hard-light

противоположность режиму soft-light , экранирует темные пиксели и умножает светлые

background-blend-mode:darken

выбирает наиболее темное значение цвета

background-blend-mode:lighten

в противоположность предыдущему режиму выбирает наиболее светлое значение цвета

background-blend-mode:color-dodge

увеличивает яркость нижнего фона, в результате увеличивается контрастность слоев

background-blend-mode:color-burn


делает нижний фон темнее, контрастность, опять же, увеличивается

background-blend-mode:difference

вычитает темный цвет из светлого, в результате получается некое подобие негатива
черный цвет не изменяется, белый становится черным

background-blend-mode:exclusion

похож на предыдущий режим, однако, имеет меньший контраст

background-blend-mode:hue

изменяет оттенок нижележащего слоя на оттенок верхнего, при этом не изменяет яркость и насыщенность

background-blend-mode:saturation

изменяет оттенок и яркость нижележащего слоя, оставляя насыщенность

background-blend-mode:color

изменяет оттенок и насыщенность нижележащего слоя на аналогичные значения верхнего, при этом не изменяет яркость

background-blend-mode:luminosity

дает прямо противоположный эффект режиму color , а если изображения поменять местами, то эффект будет точно такой же

Как же много режимов!

Режимов, действительно, много, и запутаться в них несложно. Чтобы разобраться, их можно распределить по группам:
— затемняют изображение режимы multiply, darken, color-burn ;
— осветляют изображение режимы screen, lighten, color-dodge ;
— увеличивают контрастность режимы overlay, hard-light, soft-light ;
— разницу между слоями вычисляют режимы difference, exclusion ;
— с отдельными компонентами цвета работают режимы hue, saturate, color, luminosity .

CSS background-blend-mode

The CSS background-blend-mode property defines the blending mode of each background layer.

The background-blend-mode property allows you to specify how an element’s background images and background color blend with each other.

You can blend images with images, colors with colors, as well as a combination of images with colors.

Also see mix-blend-mode for blending an element with its backdrop.

Syntax

Possible Values

Here are the possible values:

normal Default value. Sets the blend mode to normal. The top layer is the final color without mixing its colors with the layers beneath it. Similar to placing a piece of opaque paper over another. multiply Multiplies the numbers for each pixel of the top layer with the corresponding pixel for the bottom layer. This results in a darker color. Similar to two images on transparent film overlapping. screen The values of the pixels in the two layers are inverted, multiplied, and then inverted again. This has the opposite effect to multiply . The result is a brighter color. overlay Combines multiply and screen modes. The parts of the top layer where the base layer is light become lighter, the parts where the base layer is dark become darker. darken Keeps the darker tones of each layer. All pixels of the layer that are darker than the ones on the layer/s below are kept in the image. If the pixels are lighter, they are replaced with the ones from the layer/s below. This rule is applied to each of the three RGB (Red, Green, Blue) channels separately. lighten Same behavior as darken but with the lighter tones kept instead. color-dodge Divides the bottom layer by the inverted top layer. This lightens the bottom layer depending on how bright the top layer is (i.e. the brighter the top layer, the more its color affects the bottom layer). color-burn Divides the inverted bottom layer by the top layer, and then inverts the result. This darkens the top layer increasing the contrast to reflect the color of the bottom layer. The darker the bottom layer, the more its color is used. hard-light Combines the multiply and screen modes. Equivalent to overlay , but with the bottom and top images swapped. soft-light Softer version of hard-light difference Subtracts the bottom layer from the top layer or the other way round, to always get a positive value (i.e. subtracting the darker color from the lighter color). Blending with black produces no result, as the value will always be 0 (due to the RGB value for black being 0,0,0 ). Blending with white inverts the other layer’s color. exclusion Similar to difference , but with lower contrast. Results in the hue of the top color, while using the saturation and luminosity of the bottom color. Results in the saturation of the top color, while using the hue and luminosity of the bottom color. Results in the hue and saturation of the top color, while using the luminosity of the bottom color. Results in the luminosity of the top color, while using the hue and saturation of the bottom color.

Илон Маск рекомендует:  Оконное приложение

In addition, all CSS properties also accept the following CSS-wide keyword values as the sole component of their property value:

initial Represents the value specified as the property’s initial value. inherit Represents the computed value of the property on the element’s parent. unset This value acts as either inherit or initial , depending on whether the property is inherited or not. In other words, it sets all properties to their parent value if they are inheritable or to their initial value if not inheritable.

Basic Property Information

Example Code

Basic CSS

Working Example within an HTML Document

CSS Specifications


  • The background-blend-mode property is defined in Compositing and Blending Level 1 (W3C Candidate Recommendation, 13 January 2015)

Browser Support

The following table provided by Caniuse.com shows the level of browser support for this feature.

Vendor Prefixes

For maximum browser compatibility many web developers add browser-specific properties by using extensions such as -webkit- for Safari, Google Chrome, and Opera (newer versions), -ms- for Internet Explorer, -moz- for Firefox, -o- for older versions of Opera etc. As with any CSS property, if a browser doesn’t support a proprietary extension, it will simply ignore it.

This practice is not recommended by the W3C, however in many cases, the only way you can test a property is to include the CSS extension that is compatible with your browser.

The major browser manufacturers generally strive to adhere to the W3C specifications, and when they support a non-prefixed property, they typically remove the prefixed version. Also, W3C advises vendors to remove their prefixes for properties that reach Candidate Recommendation status.

Many developers use Autoprefixer, which is a postprocessor for CSS. Autoprefixer automatically adds vendor prefixes to your CSS so that you don’t need to. It also removes old, unnecessary prefixes from your CSS.

You can also use Autoprefixer with preprocessors such as Less and Sass.

background-blend-mode

The background-blend-mode property is used to specify the blend mode for each background layer of an element.

Using the background-blend-mode property, you can blend the background layers (images and color) of an element.

The property takes one or more blend modes as a value—this value specifies the formula used to blend or mix the colors of the background image with the color — or other background images — behind it.

Each background layer must blend with the element’s background layer that is below it and the element’s background color. Background layers must not blend with the content that is behind the element, instead they must act as if they are rendered into an isolated group.

If the element has multiple background layers, and you specify a (comma-separated) list of blend modes for these layers, the background-blend-mode list must be applied in the same order as background-image . This means that the first blend mode in the list will apply to the first background image in the list of background images—the layer that is on top. If a property doesn’t have enough comma-separated values to match the number of layers, the user agent must calculate its used value by repeating the list of values until there are enough.

If the background shorthand is used, the background-blend-mode property for that element must be reset to its initial value.

Trivia & Notes

The background-blend-mode property is used to blend together the background layers of an element. If you want to blend elements together, you can use the mix-blend-mode property.

Official Syntax

  • Syntax:
  • Initial: normal
  • Applies To: All HTML elements
  • Animatable: no
  • Values

    Examples

    The luminosity blend mode can be used to create monochrome “tinted” image effects.


    For example, the following example blends an element’s background image with its background color, using the luminosity value.

    The result of such a blending operation looks like the following image:

    The result of blending a background image with a background color using the luminosity blend mode.

    Similarly, you can blend together two or more images, and you can use different blend modes for each background layer.

    The following example blends together the same image with a linear gradient background image, using the overlay blend mode.

    The above example will give the following result:

    overlay blend mode.» w /> The result of blending a background image with a linear gradient background image, using the overlay blend mode.

    If you have two background images, you can blend these images together and blend them with the element’s background color.

    The result of applying this blending effect looks as shown in the following image:

    hard-light blend mode.» w /> The result of blending two background images with the element’s background color, using the hard-light blend mode.

    Depending on the blend mode you use for each layer, the result will look different.

    Check the live demos for the three examples in the Live Demo section below, and change the blend mode values to see how the effect changes.

    Live Demo

    Here is a live demo with some examples for different blend modes:

    An interactive demo

    Even with the definition of each blend mode known, it is very hard (if not impossible) to predict how applying a certain blend mode will affect the image(s) it is applied to. Picking a blend mode is usually a case of trial and error—you may keep changing modes until you are satisfied with the end result.

    For that reason, I have created an interactive demo that you can use to test the effect of different blend modes on a background image of your choice. You can also choose the background color.

    Илон Маск рекомендует:  Xml на экране броузера

    A list of thumbnails will show you the result of applying the different blend modes to your input, and you can click on each thumbnail to preview the effect in the larger preview pane.

    Screenshot of the interactive demo.

    You can play with the interactive demo here.

    Browser Support

    CSS background-blend-mode

    Allows blending between CSS background images, gradients, and colors.

    Продвинутые эффекты с помощью режимов наложения фона CSS

    Дата публикации: 2020-09-17

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

    Когда вы слышите о CSS Blend Modes, как правило люди упоминают о трех новых свойствах CSS, которые получили довольно хорошую поддержку в современных браузерах. Эти свойства включают:

    background-blend-mode — для смешивания фоновых изображений элемента, градиентов и цветов фона

    mix-blend-mode — для наложения элементов друг на друга и, наконец,

    isolation — менее используемое свойство, используемое в режиме mix-blend, для смешивания элементов.

    Как создать сайт самому?

    Какие технологии и знания необходимы сегодня, чтобы создавать сайты самостоятельно? Узнайте на интенсиве!


    Эта статья будет посвящена background-blend-mode, свойству с наилучшей поддержкой, и тому, как вы можете использовать его сегодня для создания привлекательных фонов и фотоэффектов для своего сайта, которые когда-то были возможны только в Photoshop.

    Объединение градиентов CSS в режиме background-blend-mode

    Свойство background — это то, где мы можем использовать градиенты CSS. Такие функции, как linear-gradient(), radial-gradient(), и разновидности этих двух repeating-linear-gradient() и repeating-radial-gradient(), имеют повсеместную поддержку и более критически стандартизованный синтаксис в браузерах.

    Но свойство background также может принимать более одного градиента, отображаемого поверх другого, причем каждая функция разделяется запятой. Лея Веру продемонстрировала впечатляющие узоры, которые можно создать с помощью этой техники: от шахматных досок, до кирпичей и звезд.

    Но теперь, когда у нас есть свойство background-blend-mode, мы можем создавать еще более продвинутые градиенты и узоры.

    Спектральный фон

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

    Приведенный выше эффект ранее был возможен только с помощью изображения размером в десятки килобайт. Но мы только что воспроизвели эффект с помощью CSS, размеров менее чем в 200 байт, не говоря уже об отсутствии лишнего HTTP-запроса.

    Фон в виде пледа

    Мы также можем создавать интересные узоры пледа с помощью градиентов и background-blend-mode.

    Фон из кругов

    Как насчет еще одного узора, на этот раз с помощью радиального градиента:

    Другие фоны

    С помощью Yoksel и Уны Кравец я подготовил коллекцию из 24 других смешанных градиентов, чтобы сделать ваш сайт привлекательным.

    Фотоэффекты с помощью background-blend-mode

    Хотя background-image позволяет нам устанавливать для элемента несколько градиентов, мы можем также установить несколько фоновых изображений с помощью синтаксиса url() почти таким же образом. Когда мы совмещаем это с background-blend-mode и такими свойствами, как filter, все может стать действительно интересным.

    Эффект эскиза, нарисованного карандашом

    Мы можем использовать CSS, чтобы изменить фотографию слева так, как будто она была нарисована карандашом на бумаге. Без Photoshop, холста HTML5, WebGL и JavaScript. Пять свойств CSS — это все, что нам нужно.

    Хотя мы можем использовать другие элементы уровня блока, такие как body, section, figure, вот HTML, который мы используем для начала.

    Давайте займемся стилями. Замените chapel.jpg на URL-адрес изображения, которое вы используете. Мы установим два фоновых изображения, и background-size для них — cover.

    Ниже на первом квадрате показан результат нашего первого шага:

    Теперь добавим режим смешивания: background-blend-mode: difference;

    О нет, куда все исчезло? У нас остался совершенно черный квадрат. Режим смешивания difference берет два фона и вычитает пиксель за пикселем более темный цвет одного фона из более светлого цвета другого фона.

    Если вы не совсем понимаете, что здесь происходит, давайте посмотрим, что произойдет, когда мы совсем немного сместим два фона с помощью background-position и calc().

    Как создать сайт самому?

    Какие технологии и знания необходимы сегодня, чтобы создавать сайты самостоятельно? Узнайте на интенсиве!

    Через запятую мы устанавливаем две позиции фона, каждая из которых соответствует одной копии фонового изображения. Первое изображение, мы перемещаемся от центра по оси х влево на один пиксель и от центра по оси Y вверх на один пиксель. Для второй копии фонового изображения мы делаем обратное, смещаем ее вниз и вправо.

    У нас есть два фоновых изображения, которые слегка смещены, но вся фотография по-прежнему расположена по центру нашего элемента. Теперь, когда режим смешивания difference обнаруживает различия между двумя изображениями, на фото проявились контуры. Довольно круто?

    Наконец, мы используем свойство filter, чтобы инвертировать фотографию и задать для нее тона серого.

    Для этой конкретной фотографии мы также увеличим яркость, что даст дополнительный эффект увеличения контрастности линий. Вот наш окончательный фрагмент CSS для этого эффекта:

    Эффект грифельной доски

    Мы можем воссоздать эффект грифельной доски, выполнив те же действия, что и для эффекта эскиза карандашом, а на последней шаге опустим функцию invert (1).


    Эффект ночного видения

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

    Есть три части, которые мы будем смешивать с помощью режима смешивания overlay. Этот режим смешивания облегчает и затемняет фон, а также работает как комбинация двух других режимов смешивания, multiply и screen. Сначала мы настроим фоновое изображение, на этот раз одно.

    Теперь добавим градиент и background-blend-mode. Здесь мы используем слегка прозрачный радиальный градиент от лимонного до черного.

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

    И в завершении полный CSS, используемый для этого эффекта:

    Другие фотоэффекты

    Я создал галерею из 20 CSS-эффектов изображения, которые вы можете использовать на своем веб-сайте.

    Поддержка браузерами и резервные варианты

    Хорошей новостью является то, что свойство background-blend-mode имеет полную поддержку в Firefox, Chrome и Opera.
    Неплохой новостью является то, что оно имеет достаточную поддержку в Safari, которая позволяет реализовать все эффекты, рассмотренные нами здесь. В то же время Safari на сегодня не поддерживает режимы смешивание saturation, hue, color и luminosity.

    Плохая новость заключается в том, что Internet Explorer и IE Edge не поддерживают ни одно свойство режимов смешивания CSS.

    Это означает, что нам нужно отдельно рассматривать браузеры, которые еще не поддерживают режим background-blend-mode. Отличное правило CSS @supports позволяет сделать это довольно просто. Вот два примера.

    В первом примере мы возьмем наш спектральный фоновый градиент и предоставим резервный вариант, если свойство background-blend-mode не поддерживается. Для этого примера мы используем в качестве резервного — background: gray;, но вместо этого можно использовать любой другой CSS.

    15 режимов наложения средствами CSS (CSS blend modes), которые дадут новый запал вашим изображениям

    Одна из самый ценимых особенностей Photoshop’а, возможно, особенность которая позволяет опережать своих конкурентов — это режимы наложения. Режимы наложения берут два пикселя, лежащих друг над другом и комбинируют их различными способами, например, режим затемнения просто выведет более тёмный из двух тёмных пикселей. Когда распространяют по целому изображению, режимы наложения могут производить некоторые потрясающие эффекты.

    Хотя Adobe Photoshop не изобретал режимов наложения, его реализация, безусловно, самая подражаемая. Но теперь, вам не нужен Photoshop, чтобы стилизовать ваше изображение таким образом, потому что мы можем делать все это на лету с помощью CSS3.

    Поддержка браузерами

    Поддержка браузерами свойства background-blend-mode улучшается. Ранние версии браузеров требовали специфичного префикса и (или) активации экспериментальных функций. Но сайт caniuse.com сообщает нам, что уже поддерживают текущие версии Chrome, Firefox, Opera, и Safari. До сих пор нет ни каких признаков поддержки со стороны IE, но так как это очень прогрессивное улучшение, мы можем начинать пользоваться им.

    Как использовать background-blend-mode

    Есть несколько вариантов режима наложения в рекомендациях кандидатов CSS3, но наиболее полезным для наших целей является background-blend-mode. Это свойство позволяет смешать два изображения или изображения и цвет фона.

    Вот код, который требуется:

    И здесь наш базовый CSS:

    Сейчас мы готовы использовать режим наложения.

    Чтобы сделать это мы собираемся добавить другой класс к нашему div’у, например, “multiply”:

    Илон Маск рекомендует:  Функции xslt

    И тогда мы создадим второе правило стиля:

    Если вы ходите взглянуть на исходный код, вы можете загрузить его здесь.

    Умножение

    Умножение, как следует из названия, умножает базовsый пиксель на совмещаемый цвет, результатом является затемнение. Умножаемые чёрные делают результат чёрным, а умножение былых оставляет изображение без изменений.

    Экран

    Режим «Экран» перемножает два инвертированных по цвету пикселя. Экран это противоположный умножению и использование экрана на белом выдаст в результате белое изображение, а на чёрным — оставить изображение неизменным.

    Наложение

    Наложение является сложным режим смешивания. Умножение зависит от базового цвета: светлые цвета становятся светлее, темные цвета становятся темнее.


    Затемнение

    Затемнение, затемняет изображение. Оно смотрит на два перекрывающихся пикселя и выбирает более тёмный из двух.

    Высветление

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

    Осветление основы

    Осветление основы делает светлее базовый цвет для отражения совмещённого цвета в результате уменьшения контраста

    Цветовой ожог

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

    Жесткий свет

    Жесткий свет либо умножает, или осветляет цвета в зависимости от цвета. Если смесь легче чем 50% серого изображение будет светлее, в противном случае она будет затемнена. Это отличный способ для повышения бликов и теней в кадре.

    Мягкий свет

    Мягкий свет похож на жестком свете, но вместо умножения или скрининга цвета, мягкий свет использует высветление основы и ожог для нежного эффекта.

    Разница

    Разница сравнивает два перекрывающихся пикселей и вычитает цвет с большей яркостью от другого.

    Исключение

    Исключение похожа на разницу, но оно производит к меньшему контрасту, следовательно оно немного удобнее.

    Оттенок

    Оттенок берёт яркость и насыщенность базового цвета и оттенок цвета смеси и объединяет их.

    Насыщенность

    Насыщенность, как оттенок, сливается из двух значений базового цвета с одним свойством совмещенного цвета, в данном случае насыщения.

    Цвет по той же схеме, как тон и насыщенность, на этот раз, однако, это яркость основного цвета и цветовой тон и насыщенность совмещенного цвета.

    Светимость

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

    Изображение маяка, используемое в статье взято с Shutterstock.

    Хотите узнать, как заполучить короткий и красивый адрес электронной почты (e-mail)? или как выбрать качественный хостинг? Всё это и многое другое на сайте codeby.net. Подписывайтесь на нашу e-mail рассылку (внизу страницы) или на ленту новостей и вы узнаете первым о новых статьях! Также вступайте в нашу официальную группу вконтакте — там вам очень рады!

    Поделитесь этой статьёй с друзьями, если хотите выхода новых статей:

    CSS blend mode

    Tatjana B.

    Usually, when adding an image to a website, the first thing we do is edit the image in an external software, such as Photoshop. Does the blend mode eliminate the need to use this kind of software? Not really. But, it in a lot of cases you will be able to add effects to the image directly with CSS.

    When creating your design, you should follow some best practice advice.

    Background Blend Mode and Mix Blend Mode

    When using the background-blend-mode property, you can blend the background color or image of an element. Blend modes are defined as a value and they specify how to blend or mix the colors of the background image with the color, or other background images, behind it.


    On the other hand, the mix-blend-mode property specifies how the content of an element blends with its background and the content of its direct parent. Elements on overlapping layers will blend with those beneath it. In this case, it’s important to mention the isolation property. It stops the elements with mix-blend-property from blending with the backdrop.

    Background-Blend-Mode

    Let’s show the basic usage of the background-blend-mode by blending the background image with the background color.

    On the top, we see the original image, while the bottom shows the image with blend mode applied to it.

    First, a background image URL needs to be specified, and afterward a background color that the image will be blended with. There are many blend modes available to choose from, here the multiply blend mode is added to demonstrate how it will affect the image. Along with a solid background color, a background gradient can also be used for blending.

    Now, let’s look at how we can use background-blend-mode for blending two images together. We are going to blend the following two images together:

    In this case, we have two examples, where the first one has a background color added to it, while the second has no background color.

    We have demonstrated two possible values for the background-blend-mode, but there are many of them:

    • screen,
    • overlay,
    • darken,
    • lighten,
    • color-dodge,
    • color-burn,
    • hard-light,
    • soft-light,
    • difference,
    • exclusion,
    • hue,
    • saturation,
    • color and
    • luminosity.

    Mix-Blend-Mode

    A popular usage of this effect is creating cut out text. When doing this, it is useful to keep in mind usage of the line-height property.

    Support

    Before using this property, make sure you check out Can I Use for more details on its support for these properties. Currently, the background-blend-mode property has a slightly better support, hopefully, mix-blend-mode will catch up soon.

    Summary

    We have explained the basics of these two properties, now it’s up to you to play with the properties and create beautiful and interesting visuals for your website.

    If you liked this article be sure to subscribe to our newsletter — there are much more to come!

    CSS | Свойство background-blend-mode

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

      Нормальный: это значение по умолчанию. Устанавливает режим смешивания на нормальный.
      Синтаксис:

    Пример:

    ссылка на сайт
    brightness_4
    код

    Выход:

    Умножение: устанавливает режим смешивания для умножения. Это приводит к более темному изображению, чем раньше.
    Синтаксис:

    Пример:

    ссылка на сайт
    brightness_4
    код

    Выход:

    Экран: устанавливает режим смешивания на экран. В этом режиме изображение и цвет инвертируются, умножаются, а затем инвертируются. снова.
    Синтаксис:

    Пример:

    ссылка на сайт
    brightness_4
    код


    Выход:

    Darken: устанавливает режим смешивания для затемнения. В этом режиме, если фоновое изображение темнее, чем цвет фона, изображение заменяется, в противном случае оно остается прежним.
    Синтаксис:

    Пример:

    ссылка на сайт
    brightness_4
    код

    Выход:

    Осветление: устанавливает режим смешивания на осветление. В этом режиме, если фоновое изображение светлее, чем цвет фона, изображение заменяется, в противном случае оно остается прежним.
    Синтаксис:

    Пример:

    ссылка на сайт
    brightness_4
    код

    Выход:

    Color-Dodge: устанавливает режим смешивания на Color-Dodge. В этом режиме цвет фона делится на инверсию фонового изображения. Это очень похоже на режим наложения экрана.
    Синтаксис:

    Пример:

    ссылка на сайт
    brightness_4
    код

    Выход:

    Насыщенность: устанавливает режим смешивания для осветления. Этот режим поддерживает насыщенность фонового изображения, смешивая оттенок и яркость цвета фона.
    Синтаксис:

    Пример:

    ссылка на сайт
    brightness_4
    код

    Выход:

    Разница: устанавливает режим смешивания на разницу. Этот режим является результатом вычитания более темного цвета фонового изображения и фонового цвета из самого светлого. Часто изображение будет иметь очень высокий контраст.

    Background blend mode on PNG images

    Long story short, I want my (any) image to change the color on hover, but I can’t make it work well on PNG images. The problem is with transparency. I don’t want to apply my color on transparent space. My CSS looks like this:

    Here is the full jsFiddle example. All I want is to get rid of that color around the icon, which should be transparent.

    5 Answers 5

    6 months late to the party but you could use the mask-image CSS property. Its experimental but fairly well supported:

    Alternatively you can get a similar effect using css filters:

    Фон на чистом CSS c режимом смешивания background-blend-mode

    Так как в Photoshop вы уже встречали режимы смешивания, сегодня вашему вниманию предлагаю пример создания фона на чистом CSS.

    Смешивание реализовано благодаря свойству background-blend-mode. Значения этого свойства точно такое же, как в графическом редакторе: lighten, multiply, hard-light и так далее.

    Обзор

    Проголосуйте за урок

    Оценка

    Итог : Уважаемые читатели! Если вам понравилась статья не поленитесь проголосовать и оставить комментарий, ведь так я смогу понять полезность уроков и статей, и улучшить их качество в будущем. Заранее спасибо!

    Понравилась статья? Поделиться с друзьями:
    Кодинг, CSS и SQL