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

Leave a Comment / Css / 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

alt + ←

→

linear-gradient()

alt + →

CSS | background-blend-mode Property — GeeksforGeeks

  • Читать
  • Обсудить
  • Практика
  • Видео
  • Курсы

    • Улучшить статью

    Сохранить статью

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

    Синтаксис:  

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

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

    • обычный

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

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

    HTML

    9006067 >

     

    < head >

         < title >background-blend-mode Property title >

         < стиль >

             #myDIV {

                 6 ширина:

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

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

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

                 background-image:

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

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

             }

         style >

    head >

     

    < body >

         < div id = "mydiv" > Div >

    Body >

    >

    1>

    >

    > 0067 html >

    • Вывод:

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

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

    HTML

    < HTML >

    < HEAD >

    >

    >

    >

    >

    66666666666666667> 6666667> 66669> 6666669>

    < Стиль >

    #MYDIV {

    Ширить: 400PX;

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

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

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

                 background-image:

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

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

             }

         style >

    head >

     

    < body >

         < div id = "myDIV" > div >

    body0067

    HTML >

    • Выход:

    9003

  • . Сетка: 2 2 . В этом режиме и изображение, и цвет инвертируются, умножаются, а затем инвертируются. опять таки.

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

    HTML

    < html >

     

    < head >

         < title >background -blend-mode Свойство title >

         < style >

    9006 5  0067 #myDIV {

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

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

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

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

                 background-image:

                 background-blend-mode: screen;

                 background-size: содержат;

             }

         style >

    head >

     

    < body >

    < div id = "myDIV" > div >

    body >

     

    html >

    • Output:

    Darken: It sets the режим наложения, чтобы затемнить. В этом режиме, если background-image темнее background-color, то изображение заменяется, иначе остается как было.

    • Синтаксис:  
     background-blend-mode: затемнить;
    • Example:  

    HTML

    < html >

     

    < head >

         < title >background-blend-mode Property title >

    < Стиль >

    #MYDIV {

    Ширить: 400PX;

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

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

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

                 background-image:

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

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

             }

         style >

    head >

     

    < body >

    < div id = "myDIV" > div >

    body >

     

    html >

    • Результат:

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

    • Синтаксис:  
     background-blend-mode: lighten;
    • Example:  

    HTML

    < html >

     

    < head >

         < title >свойство background-blend-mode title >

         < style >

             #myDIV {

                 width: 400px;

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

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

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

                 background-image:

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

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

             }

         style >

    head >

     

    < body >

    < DIV ID = "MyDiv" > DIV >

    >

    >

    >

    >

    66666666666666666666666666666666666666666666666666666666666666666666666666669. . В этом режиме фоновый цвет делится на инверсию фонового изображения. Это очень похоже на режим наложения экрана.

    • Синтаксис:  
     background-blend-mode: color-dodge;
    • Example:  

    HTML

    < html >

     

    < head >

         < title >свойство background-blend-mode title >

         < style >

             #myDIV {

                 width: 400px;

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

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

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

                 background-image:

                 background-blend-mode: color-dodge;

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

             }

         style >

    head >

     

    < body >

    < DIV ID = "MyDiv" > DIV >

    16666666666666666666666666666666666666666666666666666666666. 666666666666666666666666666666666666666666666669006> 666666666666666666666666666666666666666666666. html >

    • Вывод:

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

    • Синтаксис:  
     background-blend-mode: saturation;
    • Example:  

    HTML

    < html >

     

    < head >

         < title >свойство background-blend-mode title >

         < style >

             #myDIV {

                 width: 400px;

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

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

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

                 background-image:

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

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

             }

         style >

    head >

     

    < body >

         < div id = "myDIV" > div >

    body >

     

    html >

    • Вывод:

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

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

    HTML

    < html >

     

    < head >

         < title >свойство background-blend-mode title >

         < style >

             #myDIV {

                 width: 400px;

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

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

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

                 background-image:

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

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

             }

         style >

    head >

     

    < body >

    < DIV ID = "MyDiv" > DIV >

    16666666666666666666666666666666666666666666666666666666666. 666666666666666666666666666666666666666666666669006> 666666666666666666666666666666666666666666666. html >

    • Вывод:

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

    • Синтаксис:  
     background-blend-mode: luminosity;
    • Example:  

    HTML

    < html >

     

    < head >

         < title >свойство background-blend-mode title >

         < style >

             #myDIV {

                 width: 400px;

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

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

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

                 background-image:

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

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

             }

         style >

    head >

     

    < body >

         < div id = "myDIV" > div >

    body >

     

    html >

    • Вывод:

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

    • Синтаксис:  
     background-blend-mode: Overlay;
    • Example:  

    HTML

    < html >

     

    < head >

         < title >свойство background-blend-mode title >

         < style >

             #myDIV {

                 width: 400px;

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

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

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

                 background-image:

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

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

             }

         style >

    head >

     

    < body >

    < DIV ID = "MyDiv" > DIV >

    >

    >

    >

    >

    96666666666666666666666666666666666666666666666666666666666666666666666666669. HTML >

    • Выход:

    Поддерживаемые браузеры: . Броузер поддерживается .2065 собственность перечислены ниже:

    • Google Chrome 35.0
    • Edge 79.0
    • Firefox 30.0
    • Opera 22.0
    • Apple Safari 8.0


    CSS FOOLAND-BLEND-MODE | Могу ли я использовать... Таблицы поддержки для HTML5, CSS3 и т. д.

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

    Поиск

    ?

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

    - CR

    • Глобальное использование
      97,09% + 0,13% знак равно 97,22%

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

    Chrome
    1. 4 - 34: не поддерживается
    2. 35 - 45: Поддерживается
    3. 00% - Partial support"> 46: Частичная поддержка
    4. 47 - 106: Поддерживается
    5. 107: Поддерживается
    6. 108 - 110: 50004
    7. 107: поддержано
    8. 108 - 110: 110004
    9. 107.
    10. 12–18: не поддерживается
    11. 79 - 106: поддержано
    12. 107: Поддерживается
    Safari
    1. 3,1 - 7: Не поддерживается
    2. 7,1 - 10: частичная поддержка
    3. 10.1 - 16,0: поддержал
    4. 16.1: 1000444444444444444444444444444444444449 28134
      5. 9 4. 0134. Supported
    Firefox
    1. 2 - 29: Not supported
    2. 30 - 106: Supported
    3. 107: Supported
    4. 108 - 109: Supported
    Opera
    1. 9 - 21: Not supported
    2. 22 - 32: Поддержано
    3. 33: Частичная поддержка
    4. 34 - 91: Поддержано
    5. 92: Поддержано
    IE
    1. 5,5 - 10: не поддерживается
    2. 11: не поддерживает
    99999595959595959595959595959595995.
    1. 28% - Supported"> 107: Supported
    Safari on iOS
    1. 3.2 - 7.1: Not supported
    2. 8 - 10.2: Partial support
    3. 10.3 - 16.0: Supported
    4. 16.1: Supported
    Samsung Internet
    1. 4 - 18.0: Supported
    2. 19.0: Supported
    Opera Mini
    1. all: Not supported
    Opera Mobile
    1. 10 - 12.1: Not supported
    2. 72: Supported
    UC Browser for Android
    1. 13.4: Поддерживается
    Браузер Android

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

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