CSS mix-blend-mode 属性

实例

拥有红色背景的容器，以及与这个红色容器融合的图像（暗）：

.container {
  background-color: red;
}

.container img {
  mix-blend-mode: darken;
}

亲自试一试

可以在页面下方找到更多 TIY 实例。

定义和用法

mix-blend-mode 属性规定元素的内容应如何与其直接父背景混合。

默认值： normal
继承： 否
动画制作： 不支持。请参阅：动画相关属性。
JavaScript 语法： object.style.mixBlendMode = "darken"

浏览器支持

表格中的数字注明了完全支持该属性的首个浏览器版本。

属性 Chrome IE Firefox Safari Opera
mix-blend-mode 41.0 79.0 32.0 8.0 35.0

CSS 语法

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

属性值

值 描述
normal 这是默认值。将混合模式设置为普通。
multiply 将混合模式设置为 multiply。
screen 将混合模式设置为 screen。
overlay 将混合模式设置为 overlay。
darken 将混合模式设置为 darken。
lighten 将混合模式设置为 lighten。
color-dodge 将混合模式设置为 color-dodge。
color-burn 将混合模式设置为 color-burn。
difference 将混合模式设置为 difference。
exclusion 将混合模式设置为 exclusion。
hue 将混合模式设置为 hue。
saturation 将混合模式设置为 saturation。
color 将混合模式设置为 color。
luminosity 将混合模式设置为 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;}

亲自试一试

实例

使用 mix-blend-mode 来创建响应式 cutout/knockout 文本（抠图文本）：

.image-container {
  background-image: url("paris.jpg");
  background-size: cover;
  position: relative;
  height: 300px;
}

.text {
  background-color: white;
  color: black;
  font-size: 10vw; 
  font-weight: bold;
  margin: 0 auto;
  padding: 10px;
  width: 50%;
  text-align: center;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  mix-blend-mode: screen;
}

亲自试一试

相关页面

CSS 参考手册：CSS background-blend-mode 属性

CSS 参考手册

CSS 属性

目录