css混合模式制作
使用 CSS 混合模式制作效果
CSS 混合模式（Blend Modes）允许通过不同方式混合图层颜色，实现创意视觉效果。混合模式通过 mix-blend-mode 和 background-blend-mode 属性控制。
mix-blend-mode 属性
作用于元素与下层内容的混合效果，常用于文本与背景的叠加。
示例代码：
.text-overlay {
mix-blend-mode: multiply;
color: #ff0000;
background: white;
}background-blend-mode 属性
控制元素背景图层（如多张背景图或背景颜色）之间的混合。
示例代码：
.gradient-image {
background-image: url("image.jpg"), linear-gradient(red, blue);
background-blend-mode: overlay;
}常用混合模式类型
- multiply：正片叠底，加深颜色。
- screen：滤色，提亮颜色。
- overlay：叠加，结合 multiply 和 screen 效果。
- difference：差值，产生反色对比。
- hue：保留上层色相，混合下层明度与饱和度。
实际应用示例
文字与背景混合
<div class="container">
<h1 class="blend-text">混合模式文字</h1>
</div>.container {
background: url("texture.jpg");
}
.blend-text {
mix-blend-mode: screen;
color: white;
}图片双色调效果
.duotone {
background-image: url("photo.jpg"), linear-gradient(#ff00ff, #00ffff);
background-blend-mode: luminosity;
}注意事项
- 混合模式性能消耗较高，避免大面积使用。
- 部分模式（如
difference）可能导致不可预测的颜色结果，需多次调试。 - 浏览器兼容性需检查，旧版本需前缀（如
-webkit-mix-blend-mode）。
通过灵活组合混合模式与透明度（opacity），可进一步扩展设计可能性。
