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" 運行代碼 ?

瀏覽器支持

表格中的數(shù)字表示支持該屬性的第一個瀏覽器版本號。

屬性
mix-blend-mode	41.0	不支持	32.0	8.0	35.0

語法

mix-blend-mod:  <blend-mode>

的值可以是以下幾個：

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

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

實例

各種混合模式實例：

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

運行代碼 ?

上一篇：min-width 下一篇：object-fit