CSS mix-blend-mode 属性

定义和用法

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

另请参阅：

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

实例

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

.container {
  background-color: red;
}

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

亲自试一试

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

CSS 语法

mix-blend-mode: normal|multiply|screen|overlay|darken|lighten|color-dodge|color-burn|difference|exclusion|hue|saturation|color|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;
}

亲自试一试

浏览器支持

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