background-blend-mode仅混合同一元素的多个背景层，需至少两个逗号分隔的背景（如图片+渐变）并显式声明background-color作为fallback；mix-blend-mode则混合元素内容与下方堆叠上下文，不作用于自身背景图。
background-blend-mode 是唯一能在 index.html 中直接生效的“背景图片混合模式”，但它不是 HTML5 的能力，也不作用于两个独立 <img> 标签——它只混合**同一个元素上的多个背景层**。
为什么 background-blend-mode 在 index.html 里没反应
最常见原因是：只写了 background-image: url("a.jpg")，没配第二个背景源。这个属性必须有至少两个背景才能计算混合，单层背景等于没有混合对象。
- 必须用逗号分隔多个背景，例如：
background-image: url("a.jpg"), linear-gradient(45deg, #ff0, #00f) - 书写顺序 = 图层上下关系：
url()在前是上层，linear-gradient()在后是下层 - 别用
background: url("x.jpg")这种简写，它会覆盖掉background-color，导致降级失效 - 务必显式声明
background-color: #fff—— 它既参与混合，也是不支持时的 fallback 显示色
mix-blend-mode 不能用于 index.html 的 background-image
mix-blend-mode 混合的是**元素内容与它下方堆叠上下文的内容**（比如父容器背景、兄弟元素），但它完全忽略元素自身的 background-image。
Article To Html
下载
文章转信息图。将文章/笔记转化为手机可读的 HTML 信息图，自动匹配视觉风格。触发场景：文章转图、笔记转图、信息图、转小红书图、做张图、可视化这篇文章、文生图。
- 想让一张图和纯色背景“正片叠底”，得把
<img src="x.jpg">放进一个带background-color: #fbd290的容器里，并给<img>加mix-blend-mode: multiply - 如果父容器加了
transform、opacity: 0.99、isolation: isolate，就会创建新层叠上下文，mix-blend-mode直接失效 - 两个
<img>叠在一起？可以，但必须同属一个 stacking context，且不能有任何中断混合的 CSS 属性
移动端 Safari 和深色模式下的隐藏陷阱
iOS Safari（尤其 iOS 15 及更早）对 background-blend-mode 支持不稳定，而深色模式切换时，硬编码的 background-color: #fff 会导致混合结果发灰甚至死黑。
- 用
@media (prefers-color-scheme: dark)重置 fallback 背景色，例如：background-color: #1a1a1a - 避免在
position: sticky或will-change: transform元素上使用mix-blend-mode，iOS 会静默禁用 - 动画中频繁切换
background-blend-mode值可能引发重绘抖动，只建议用于静态 banner 区域 - 需要模糊背景？别碰这两个属性——改用
backdrop-filter: blur(4px)，它才是真模糊
真正容易被忽略的一点：你写的 background-blend-mode: overlay 在浅色背景上看着正常，切到深色模式后可能整个区域变暗到文字不可读——因为 fallback 背景色没同步改，混合逻辑却照常运行。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
