CSS свойство mix-blend-mode

  • Предыдущая страница min-width
  • Следующая страница @namespace

Определение и использование

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

См. также:

CSS Референс Манифест:Свойство background-blend-mode CSS

Пример

Контейнер с красным фоном и изображением, смешанным с этим красным контейнером (тёмный):

.container {
  background-color: red;
}
.container img {
  mix-blend-mode: darken;
}

Попробуйте сами

Более примеров TIY можно найти в нижней части страницы.

Синтаксис CSS

mix-blend-mode: normal|multiply|screen|overlay|darken|lighten|color-dodge|color-burn|difference|exclusion|hue|saturation|color|luminosity;

Значения свойств

Значения Описание
normal Это значение по умолчанию. Установить режим смешивания на обычный.
multiply Установить режим смешивания на multiply.
screen Установить режим смешивания на screen.
overlay Установить режим смешивания на overlay.
darken Установить режим смешивания на darken.
lighten Установить режим смешивания на lighten.
color-dodge Установить режим смешивания на color-dodge.
color-burn Установить режим смешивания на color-burn.
difference Установить режим смешивания на difference.
exclusion Установить режим смешивания на exclusion.
hue Установить режим смешивания на hue.
saturation Установить режим смешивания на saturation.
color Установить режим смешивания на color.
luminosity Установить режим смешивания на luminosity.

Технические детали

Значение по умолчанию: normal
Инheritance: Нет
Создание анимации: Не поддерживается. См. также:Свойства анимации.
Синтаксис JavaScript: object.style.mixBlendMode = "darken"

Более примеров

Пример

Показать все значения:

.normal {mix-blend-mode: normal;}
.multiply {mix-blend-mode: multiply;}
.screen {mix-blend-mode: screen;}
.overlay {mix-blend-mode: overlay;}
.darken {mix-blend-mode: darken;}
.lighten {mix-blend-mode: lighten;}
.color-dodge {mix-blend-mode: color-dodge;}
.color-burn {mix-blend-mode: color-burn;}
.difference {mix-blend-mode: difference;}
.exclusion {mix-blend-mode: exclusion;}
.hue {mix-blend-mode: hue;}
.saturation {mix-blend-mode: saturation;}
.color {mix-blend-mode: color;}
.luminosity {mix-blend-mode: luminosity;}

Попробуйте сами

Пример

Используйте mix-blend-mode для создания адаптивного текста с вырезом/выпуклостью (cutout/knockout):

.image-container {
  background-image: url("paris.jpg");
  background-size: cover;
  position: relative;
  height: 300px;
}
.text {
  background-color: white;
  color: black;
  font-size: 10vw; 
  font-weight: bold;
  margin: 0 auto;
  padding: 10px;
  width: 50%;
  text-align: center;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  mix-blend-mode: screen;
}

Попробуйте сами

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

Числа в таблице указывают на первую версию браузера, которая полностью поддерживает этот атрибут.

Chrome IE / Edge Firefox Safari Opera
41.0 79.0 32.0 8.0 35.0
  • Предыдущая страница min-width
  • Следующая страница @namespace