使用 background-blend-mode 可解决 CSS 背景图片叠加颜色无效问题，通过同时设置 background-color 和 background-image，并应用 multiply、screen 等混合模式实现染色、变暗或提亮效果，需注意两者共存、图片路径正确及浏览器兼容性。
在使用 CSS 设置背景图片并叠加颜色时，如果发现颜色覆盖无效，通常是因为直接设置 background-color 和 background-image 会导致颜色被图片覆盖或不起作用。这时可以使用 background-blend-mode 来实现图片与颜色的混合效果，让叠加变得可见且可控。
使用 background-blend-mode 混合背景色和图片
background-blend-mode 允许你将背景色与背景图片进行混合，产生透明、遮罩或滤镜般的效果。关键在于同时定义 background-color 和 background-image，并设置 blend-mode 模式。
示例代码：
<div style="width: 100%; height: 200px; background-image: url('your-image.jpg'); background-color: #ff6b6b; background-blend-mode: multiply; background-size: cover; background-position: center;"><!-- 内容 --></div>上面的例子中：
立即学习“前端免费学习笔记（深入）”；
- 设置了背景图片和背景颜色（红色）
- 使用 background-blend-mode: multiply 实现颜色叠加，使图片变暗并染上红色调
- 其他常用模式包括：screen、overlay、darken、lighten 等，可根据视觉需求选择
常见 blend-mode 效果说明
- multiply：加深模式，适合让颜色融入图片，常用于营造氛围
- screen：提亮模式，适合在暗图上叠加浅色
- overlay：叠加模式，结合明暗增强对比
- soft-light：柔光，轻微着色，更自然
注意事项
- 确保 background-color 和 background-image 同时存在，否则 blend-mode 无效
- 图片路径正确，否则只能看到纯色
- 某些旧版浏览器不支持 background-blend-mode，需测试兼容性
- 可配合伪元素实现更复杂的叠加控制（如仅对部分区域生效）
基本上就这些。用好 background-blend-mode 能轻松实现图片着色、滤镜、蒙版等视觉效果，不再担心颜色“失效”。
