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