Компоновка и смешивание CSS

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

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

Компоновка и смешивание в действии

В этом примере каждый блок имеет границу, два полосатых фоновых изображения и однотонный фоновый цвет. Общий фон для всех блоков содержит узор из кругов. Три блока во втором ряду настроены на смешивание с фоном контейнера.

Обратите внимание, как фон, граница и содержимое в результате подвергаются влиянию смешивания. Нажмите «Запустить» в примере выше, чтобы посмотреть или отредактировать код анимации в MDN Playground.

Справочник

Свойства

Связанные понятия

<blend-mode> тип данных
backdrop-filter свойство CSS
filter свойство CSS
mask-composite свойство CSS
background-color свойство CSS
background-image свойство CSS
контекст стекирования термин глоссария
<feBlend> примитив фильтра SVG
<feComposite> примитив фильтра SVG

Спецификации

Спецификация
Компоновка и смешивание Уровень 2
Компоновка и смешивание Уровень 1

См. также

Свойства в модуле эффектов фильтров CSS позволяют применять эффекты фильтров, такие как размытие и изменение интенсивности цвета, к изображениям, фонам и границам.
Компоновка и смешивание в CSS (2015)
Редактирование изображений в CSS: режимы смешивания (2022)
web.dev: режимы смешивания (2021)

© 2005–2024 MDN contributors.
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.
https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_compositing_and_blending