css mix-blend,CSS mix-blend-mode 属性 | 菜鸟教程

CSS mix-blend-mode 属性

实例

设置图片元素与父容器背景(黄色)进行混合，图片会变暗：

.container{background-color:yellow;padding:15px;}.containerimg{mix-blend-mode:darken;}

尝试一下 »

标签定义及使用说明

mix-blend-mode 属性描述了元素的内容应该与元素的直系父元素的内容和元素的背景如何混合。

默认值:

normal

继承:

无。

JavaScript 语法:

object.style.mixBlendMode = "darken"

尝试一下 »

浏览器支持

表格中的数字表示支持该属性的第一个浏览器版本号。

属性

mix-blend-mode

41.0

不支持

32.0

8.0

35.0

语法

mix-blend-mod:

的值可以是以下几个：

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

尝试一下 »