当前位置：首页 > news >正文

mix-blend-mode的了解使用

news 2025/7/19 6:42:16

mix-blend-mode 是 CSS 的一个属性，用于控制元素的内容（如文本、图像、背景等）如何与其 父元素 或背景进行混合。它类似于图形设计软件（如 Photoshop）中的图层混合模式，可以实现各种视觉效果；

| 值 | 效果 |  
|----|------|  
| `normal` | 默认值，不混合 |  
| `multiply` | 正片叠底（变暗） |  
| `screen` | 滤色（变亮） |  
| `overlay` | 叠加（增强对比） |  
| `darken` | 取较暗的部分 |  
| `lighten` | 取较亮的部分 |  
| `color-dodge` | 颜色减淡（增强亮度） |  
| `color-burn` | 颜色加深（增强暗部） |  
| `hard-light` | 强光（类似 `overlay`，但更强烈） |  
| `soft-light` | 柔光（类似 `overlay`，但更柔和） |  
| `difference` | 差值（反色效果） |  
| `exclusion` | 排除（类似 `difference`，但对比度更低） |  
| `hue` | 保留色相，混合饱和度和亮度 |  
| `saturation` | 保留饱和度，混合色相和亮度 |  
| `color` | 保留色相和饱和度，混合亮度 |  
| `luminosity` | 保留亮度，混合色相和饱和度 |

 // 文字与背景混合(效果：文字会根据背景颜色动态调整，增强对比度。)
<div class="background"><p class="text">混合模式效果</p>
</div><style>
.background {background: url('image.jpg');width: 300px;height: 200px;
}.text {color: white;font-size: 24px;mix-blend-mode: overlay; /* 文字与背景叠加 */
}
</style>

 // 图片混合(效果：两张图片会以 multiply 模式混合，暗部加深)
<div class="container"><img src="image1.jpg" class="image1"><img src="image2.jpg" class="image2">
</div><style>
.container {position: relative;
}.image1 {position: absolute;width: 100%;
}.image2 {position: absolute;width: 100%;mix-blend-mode: multiply; /* 两张图片正片叠底混合 */
}
</style>

 // 与背景色混合  效果：如果父元素背景是白色，difference 会反转颜色（红色 → 青色）)<div class="box"></div><style>
.box {width: 200px;height: 200px;background: red;mix-blend-mode: difference; /* 与父元素背景混合 */
}
</style>