码农教程 - 一技在手,衣食无忧! tools

目录

CSS mix-blend-mode 属性

❮上一节 完整的CSS参考 下一节❯

示例

具有红色背景的容器和与红色容器混合的图片（变暗）：

.container {
  background-color: red;
}

.container img {
  mix-blend-mode: darken;
}
亲自试一试 »

下面有更多 "亲自试一试" 示例。

定义和用法

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

展示演示❯

默认值： 普通的
遗传： 不
可动画： 不。阅读可动画的
JavaScript 语法： 对象.style.mixBlendMode = "darken"尝试一下

浏览器支持

表中的数字指定完全支持该属性的第一个浏览器版本。

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

属性值

Value Description Demo
normal This is default. Sets the blending mode to normal Demo ❯
multiply Sets the blending mode to multiply Demo ❯
screen Sets the blending mode to screen Demo ❯
overlay Sets the blending mode to overlay Demo ❯
darken Sets the blending mode to darken Demo ❯
lighten Sets the blending mode to lighten Demo ❯
color-dodge Sets the blending mode to color-dodge Demo ❯
color-burn Sets the blending mode to color-burn Demo ❯
difference Sets the blending mode to difference Demo ❯
exclusion Sets the blending mode to exclusion Demo ❯
hue Sets the blending mode to hue Demo ❯
saturation Sets the blending mode to saturation Demo ❯
color Sets the blending mode to color Demo ❯
luminosity Sets the blending mode to luminosity Demo ❯

更多示例

示例

所有值的体现：

.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 创建响应式剪切/剔除文本：

.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 背景混合模式 属性


❮上一节 完整的CSS参考 下一节❯