当前位置：首页 > CSS

css混合模式制作

2026-03-12 02:53:38CSS

CSS混合模式简介

CSS混合模式（Blend Modes）允许通过特定的算法将多个元素的颜色进行混合，常用于创建视觉特效、叠加纹理或调整图像色彩。混合模式通过mix-blend-mode（元素间混合）和background-blend-mode（背景层混合）属性实现。

常用混合模式类型

normal：默认模式，无混合效果。
multiply：正片叠底，颜色变暗。
screen：滤色，颜色变亮。
overlay：叠加，结合 multiply 和 screen 效果。
darken：取混合层和基色中较暗的值。
lighten：取混合层和基色中较亮的值。
color-dodge：颜色减淡，增强对比度。
color-burn：颜色加深，降低亮度。

实现方法

1. 元素间混合（mix-blend-mode）
将两个重叠的<div>或图像进行混合：

css混合模式制作

.parent {
  background-color: #ff0000;
  width: 200px;
  height: 200px;
}
.child {
  background-color: #00ff00;
  width: 100px;
  height: 100px;
  mix-blend-mode: multiply;
}

HTML结构：

<div class="parent">
  <div class="child"></div>
</div>

2. 背景层混合（background-blend-mode）
将多个背景图像或颜色混合：

css混合模式制作

.element {
  width: 300px;
  height: 300px;
  background-image: url("texture.png"), linear-gradient(red, blue);
  background-blend-mode: overlay;
}

实际应用案例

图像与文字混合
通过mix-blend-mode让文字与背景图像融合：

.text-overlay {
  color: white;
  font-size: 48px;
  mix-blend-mode: difference;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

双色渐变纹理
使用background-blend-mode创建复杂纹理：

.texture {
  background: 
    repeating-linear-gradient(45deg, black, black 10px, white 10px, white 20px),
    linear-gradient(to bottom, red, blue);
  background-blend-mode: screen;
}