background-blend-mode不生效需确认三件事：必须有至少两层背景（如图片+颜色或两张图片）；所有图层须写在同一background或background-image+background-color声明中；不支持伪元素单独设混合。
background-blend-mode 不生效？先确认这三件事
它不是万能的，只对 background-image 和 background-color 的组合起作用，纯色叠纯色、单张图片、background 里混写了渐变+图片但没显式声明 background-color，都会让 background-blend-mode 完全没反应。
常见错误现象：background: linear-gradient(45deg, red, blue), url(logo.png); 看不出混合效果 —— 因为缺了 background-color 这一层底色，浏览器不会自动补。
- 必须至少有两层背景：比如一张图片 + 一个颜色，或两张图片，或两个渐变
- 所有背景必须写在同一个元素的
background或background-image+background-color中（不能靠父级叠加） - 不支持伪元素
::before/::after单独设 blend（它们各自是独立渲染层）
哪些 blend mode 值真正实用？别乱试
background-blend-mode 支持 16 种值，但日常能用上的就 4–5 个。其他要么效果难控，要么兼容性差（比如 color-dodge 在 Safari 旧版本直接失效）。
-
multiply：适合深色图+浅色底，压暗交叠区，文字可读性高 -
screen：亮色图+深色底，提亮交叠区，常用于光效叠加 -
overlay：比multiply更强对比，保留高光和阴影细节，适合纹理叠加 -
darken/lighten：逻辑简单，适合做“取最暗/最亮像素”这类确定性操作
示例（深色文字在浅图上可读）：
立即学习“前端免费学习笔记（深入）”；
.card {
background: linear-gradient(135deg, #6a11cb 0%, #2575fc 100%), url(bg.jpg);
background-color: rgba(255, 255, 255, 0.8);
background-blend-mode: multiply;
}图片 + 渐变混合时，顺序决定结果
背景层从后往前绘制，background 值里越靠后的声明，图层越“上”。而 background-blend-mode 是按层序两两混合的 —— 第一层和第二层先混，结果再跟第三层混，以此类推。
错误写法：background: url(a.jpg), linear-gradient(to right, red, transparent);
→ 图片在下，渐变在上，multiply 会让渐变被图片压暗，几乎看不见红色
正确写法（想让渐变主导视觉）：
.hero {
background: linear-gradient(to right, rgba(255,0,0,0.6), transparent),
url(hero-bg.jpg);
background-blend-mode: overlay;
}- 渐变写前面 → 图层更上 → 混合后更显眼
- 用
rgba()控制渐变透明度，比调background-blend-mode更可控 - 如果要多层混合（如图+渐变+纯色），建议最多三层，再多浏览器渲染可能出偏差
Safari 和旧版 Chrome 的兼容陷阱
background-blend-mode 在 Safari 9+、Chrome 35+ 支持，但 Safari 对 background-image 中 SVG Data URL 的混合支持不稳定，且 iOS 14 之前不支持 background-blend-mode: exclusion 等冷门值。
- 务必加
background-color作为降级底色（否则 Safari 可能显示空白） - 避免在
@keyframes动画中动态改background-blend-mode—— Safari 会闪烁或卡死 - 测试时用真机，模拟器里的 Safari 渲染行为和真实设备不一致
兼容写法示例：
.blend-box {
background-color: #f0f0f0; /* 降级底色 */
background-image:
linear-gradient(45deg, rgba(255,0,0,0.3), transparent),
url(pattern.png);
background-blend-mode: multiply;
/* 不加 vendor prefix，现代浏览器都不需要了 */
}混合的边界很窄：它只管“同一元素的多背景层之间怎么算像素”，不涉及元素层级、z-index 或滤镜。想实现更复杂的图层控制，得换思路 —— 比如用 position: absolute 叠 div，再分别加 mix-blend-mode。
