CSS mix-blend-mode 屬性

設定圖檔元素與父容器背景（黃色）進行混合，圖檔會變暗：

.container {

background-color: yellow;

padding: 15px;

}

.container img {

mix-blend-mode: darken;

mix-blend-mode 屬性描述了元素的内容應該與元素的直系父元素的内容和元素的背景如何混合。

預設值:

normal

繼承:

無。

動畫:

無。 關于 CSS 動畫

JavaScript 文法:

object.style.mixBlendMode = "darken"

表格中的數字表示支援該屬性的第一個浏覽器版本号。

屬性

mix-blend-mode

41.0

不支援

32.0

8.0

35.0

<blend-mode> 的值可以是以下幾個：

多個值可以使用逗号隔開。

各種混合模式執行個體：

.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;}