Background blend mode: background-blend-mode — CSS: Cascading Style Sheets

Leave a Comment / Разное / By /

background-blend-mode — CSS — Дока

  1. Кратко
  2. Как пишется
    1. Режим контраста
    2. Режим затемнения
    3. Режим осветления
    4. Режим сравнения
    5. Компонентный режим

Кратко

Скопировано

Свойство background-blend-mode даёт возможность смешивать разные фоны между собой.

Как пишется

Скопировано

  • normal — значение по умолчанию, фоны не смешиваются, верхний слой остаётся непрозрачным.

Режим контраста

Скопировано

  • overlay — background-color смешивается с background-image, чтобы отразить светлые или тёмные участки фона.
  • hard-light — если background-image светлее background-color, то результатом будет muliply, а если светлее, то результатом будет screen.
  • soft-light — конечный результат похож на hard-light, но более мягкий, как будто на изображение попал рассеянный прожектор.

Режим затемнения

Скопировано

  • darken — если background-image темнее background-color, то изображение заменяется, в противном случае оно остаётся прежним.
  • multiply — background-image и background-color перемножаются, и обычно это приводит к получению более тёмного изображения, чем исходное.
  • color-burn — background-color инвертируется, делится на background-image и снова инвертируется. Похоже на multiply.

Режим осветления

Скопировано

  • lighten — если background-image светлее background-color, то изображение заменяется, в противном случае оно остаётся прежним.
  • screen — и изображение, и цвет инвертируются, умножаются и затем снова инвертируются.
  • color-dodge — background-color делится на обратную величину background-image. Это очень похоже на screen.

Режим сравнения

Скопировано

  • difference — результат вычитания тёмного цвета backgroound-image и background-color из самого светлого. Часто изображение будет иметь очень высокий контраст.
  • exclusion — результат очень похож на difference, но с меньшим контрастом.

Компонентный режим

Скопировано

  • saturation — сохраняет насыщенность background-image, смешивая при этом оттенок и светимость background-color.
  • color — сохраняет оттенок и насыщенность background-image и светимость background-color.
  • luminosity — светимость верхнего цвета сохраняется, при этом используются насыщенность и оттенок background-color.
  • hue — результатом будет оттенок background-image в сочетании со светлотой и насыщенностью background-color.
Оценка материала

Если вы нашли ошибку, отправьте нам пулреквест!

Во время отправки формы что-то пошло не так. Попробуйте ещё раз?

Предыдущий материал

←

background-origin

ctrl + alt + ←

Следующий материал

→

linear-gradient()

ctrl + alt + →

background-blend-mode | CAT.

IN.WEB

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

Это свойство уже поддерживается во всех основных браузерах (30.08.2021):

https://caniuse.com/css-backgroundblendmode

Собственно, режимы наложения позаимствованы из фотошопа:

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

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

нижний фон

верхний фон

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

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 — GeeksforGeeks

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

Синтаксис:  

 режим наложения фона: нормальный|умножить|экран|затемнить|осветлить|
осветление цвета | насыщенность | разница | яркость | наложение;

Значение по умолчанию:  

  • обычный

Свойство:
Обычный: Это значение по умолчанию. Он устанавливает нормальный режим наложения.

  • Синтаксис:  
 background-blend-mode: normal;
  • Пример:  

HTML

< html >

   

< головка >

     < title >background-blend-mode Property title >

     < стиль >

         # myDIV {

             ширина: 400 пикселей;

             высота: 299 пикселей;

             цвет фона: зеленый;

             background-repeat: без повтора;

             background-image: 

             background-blend-mode: нормальный;

             размер фона: содержит;

         }

     стиль >

головка >

   

< корпус > 900 51

     < div id = "myDIV" >< / дел >

тело >

   

9 0049 html >

  • Вывод:

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

  • Синтаксис:  
 фоновый режим наложения: умножить;
  • Пример:  

HTML

< HTML >

   

< головка >

     9 0050 < title >background-blend-mode Property title >

     < стиль >

         #myDIV {

             9 0050 ширина: 400 пикселей;

             высота: 299 пикселей;

             цвет фона: зеленый;

             background-repeat: без повтора;

             background-image: 

             background-blend-mode: умножить;

             размер фона: содержит;

         }

     стиль >

головка > 9 0005    

< корпус >

     < 900 50 дел id = "myDIV" > div >

900 50 корпус >

   

html >

  • Вывод:  

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

  • Синтаксис:  
 background-blend-mode: screen;
  • Пример:  

HTML

< html >

9 0050    

< головка >

     < заголовок 90 050 >background-blend-mode Property title >

     < style >

9004 9          #myDIV {

             ширина: 400 пикселей;

             высота: 299 пикселей;

             цвет фона: зеленый;

             background-repeat: без повтора;

             background-image: 

             background-blend-mode: screen;

             размер фона: содержит;

         }

     стиль >

головка >

   

< корпус 9005 0 >

     < div id = "myDIV" > div >

body >

   

html >

  • Output:

Затемнить: Устанавливает режим наложения на затемнение. В этом режиме, если background-image темнее background-color, то изображение заменяется, иначе остается как было.

  • Синтаксис:  
 background-blend-mode: darken;
  • Пример:  

HTML

< html >

   

< головка >

     < title >background-blend-mode Свойство заголовок >

     < стиль >

         #myDIV {

             ширина: 400 пикселей;

             высота: 299 пикселей;

             цвет фона: зеленый;

             background-repeat: без повтора;

             background-image: 

             background-blend-mode: затемнить;

             размер фона: содержит;

         }

     стиль >

головка >

   

< корпус 9005 0 >

     < div id = "myDIV" > 9 0050 дел >

тело >

   

html >

  • Вывод:

Осветление: Устанавливает режим наложения на осветление. В этом режиме, если background-image светлее background-color, то изображение заменяется, иначе остается как было.

  • Синтаксис:  
 background-blend-mode: lighten;
  • Пример:  

HTML

< html >

   

< головка >

     < title >background-blend-mode Свойство заголовок >

     < стиль >

         #myDIV {

             ширина: 400 пикселей;

             высота: 299 пикселей;

             цвет фона: зеленый;

             background-repeat: без повтора;

             background-image: 

             background-blend-mode: светлее;

             размер фона: содержит;

         }

     стиль >

головка >

   

< корпус 9005 0 >

     < div id = "myDIV" > 9 0050 дел >

тело >

   

html >

  • Вывод:

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

  • Синтаксис:  
 background-blend-mode: color-dodge;
  • Пример:  

HTML

< html >

   

< головка >

     < title >background-blend-mode Свойство заголовок >

     < стиль >

         #myDIV {

             ширина: 400 пикселей;

             высота: 299 пикселей;

             цвет фона: зеленый;

             background-repeat: без повтора;

             background-image: 

             background-blend-mode: color-dodge;

             размер фона: содержит;

         }

     стиль >

головка >

   

< корпус 9005 0 >

     < div id = "myDIV" > 9 0050 дел >

тело >

   

html >

  • Вывод:

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

  • Синтаксис:  
 background-blend-mode: saturation;
  • Пример:  

HTML

< html >

   

< головка >

     < title >background-blend-mode Свойство заголовок >

     < стиль >

         #myDIV {

             ширина: 400 пикселей;

             высота: 299 пикселей;

             цвет фона: зеленый;

             background-repeat: без повтора;

             background-image: 

             background-blend-mode: насыщенность;

             размер фона: содержит;

         }

     стиль >

головка >

   

< корпус 9005 0 >

     < div id = "myDIV" > 9 0050 дел >

тело >

   

html >

  • Вывод:

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

  • Синтаксис:  
 фоновый режим наложения: разница;
  • Пример:  

HTML

< html >

   

< головка >

     < title >background-blend-mode Свойство заголовок >

     < стиль >

         #myDIV {

             ширина: 400 пикселей;

             высота: 299 пикселей;

             цвет фона: зеленый;

             background-repeat: без повтора;

             background-image: 

             background-blend-mode: разница;

             размер фона: содержит;

         }

     стиль >

головка >

   

< корпус 9005 0 >

     < div id = "myDIV" > 9 0050 дел >

тело >

   

html >

  • Вывод:

Светимость: Устанавливает режим наложения на яркость. В этом режиме яркость верхнего цвета сохраняется при использовании насыщенности и оттенка фонового цвета.

  • Синтаксис:  
 background-blend-mode: luminosity;
  • Пример:  

HTML

< html >

   

< головка >

     < title >background-blend-mode Свойство заголовок >

     < стиль >

         #myDIV {

             ширина: 400 пикселей;

             высота: 299 пикселей;

             цвет фона: зеленый;

             background-repeat: без повтора;

             background-image: 

             background-blend-mode: яркость;

             размер фона: содержит;

         }

     стиль >

головка >

   

< корпус 9005 0 >

     < div id = "myDIV" > 9 0050 дел >

тело >

   

html >

  • Вывод:

Наложение: Устанавливает режим наложения на наложение. В этом режиме цвет фона смешивается с фоновым изображением, чтобы отразить яркость или темноту фона.

  • Синтаксис:  
 background-blend-mode: Overlay;
  • Пример:  

HTML

< html >

   

< головка >

     < title >background-blend-mode Свойство заголовок >

     < стиль >

         #myDIV {

             ширина: 400 пикселей;

             высота: 299 пикселей;

             цвет фона: зеленый;

             background-repeat: без повтора;

             background-image: 

             background-blend-mode: наложение;

             размер фона: содержит;

         }

     стиль >

головка >

   

< корпус 9005 0 >

     < div id = "myDIV" > 9 0050 дел >

тело >

   

html >

  • Вывод:

Поддерживаемые браузеры: Браузер, поддерживаемый background-blend-mode свойства перечислены ниже:  

  • Google Chrome 35. 0
  • Edge 79.0
  • Firefox 30.0
  • Opera 22.0
  • Apple Safari 8.0

 


Режим наложения фона CSS | Могу ли я использовать... Таблицы поддержки для HTML5, CSS3 и т. д.

Могу ли я использовать

Поиск ?

CSS фоновый режим наложения

- CR

  • Глобальное использование
    96,38% + 0,16% "=" 96,54%

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

Chrome
  1. 4–34: не поддерживается
  2. 35–45: поддерживается
  3. 46: частичная поддержка
  4. 47–113: поддерживается
  5. 114: поддерживается ed
  6. 115–117: поддерживается
Edge
  1. 02% - Not supported"> 12 - 18: не поддерживается
  2. 79 - 113: поддерживается
  3. 114: поддерживается
Safari
  1. 3.1 - 7: не поддерживается
  2. 7.1 - 10: частичная поддержка
  3. 10,1 - 16,4: поддерживается
  4. 16,5 : Поддерживается
  5. 16.6 - TP: Поддерживается
Firefox
  1. 2 - 29: Не поддерживается
  2. 30 - 114: Поддерживается
  3. 115: Поддерживается
  4. 116–117: поддерживается
Opera
  1. 04% - Not supported"> 9–21: не поддерживается
  2. 22–32: поддерживается
  3. 33: частичная поддержка
  4. 34–99: поддерживается
  5. 100: поддерживается
IE
  1. 5,5–10: не поддерживается
  2. 11: не поддерживается
Chrome для Android
  1. 114: поддерживается
Safari на iOS
  1. 3.2–7.1: не поддерживается
  2. 8–10.2: частичная поддержка
  3. 10,3–16,4: поддерживается
  4. 16,5: поддерживается

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

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