background-blend-mode完全没反应的最常见原因是结构错误：必须将多个背景层（如颜色、图片、渐变）用逗号分隔写在同一background声明中，分离声明、单层背景、origin不一致或资源加载失败均导致其静默失效。
background-blend-mode 为什么完全没反应？
最常被忽略的是：浏览器压根没把它当混合指令处理，而是直接跳过。DevTools 里该属性灰掉、computed styles 中不出现、写了 multiply 却和没写一样——这些都不是兼容性问题，而是结构没搭对。
- 只写了
background-image: url("a.jpg")—— 没有第二层，无混合对象 -
background-color: #fff和background-image: url("b.png")分两行写 —— 浏览器只保留后者，background-blend-mode失去作用目标 - 用了
background: #000这类单值简写 —— 它等价于background-color，不是多层背景 - 某张图 404 或跨域加载失败 —— 整组背景中断，混合逻辑不触发
-
background-origin不一致（比如一个用border-box，另一个默认padding-box）—— 浏览器判定“不可混合”，标为invalid
怎么写才算“正确叠加”的多层背景？
必须把所有图层塞进同一个 background（或 background-image）声明，用逗号分隔，顺序即图层上下关系：靠前的是底层，靠后的是上层。
- ✅ 正确：
background: linear-gradient(45deg, #ff6b6b, transparent), url("texture.png"), #fff; - ❌ 错误：
background-color: #fff; background-image: url("texture.png");—— 分离声明，无效 - ⚠️ 注意：
background-color写成逗号分隔的一部分，才会被识别为独立图层；否则它只是 fallback 色，不参与混合 - ⚠️ 注意：
background-blend-mode: multiply, screen对应三层背景时，只写两个值，第三个自动补normal；但若写了三个值，就必须严格匹配图层数
哪些混合模式既好用又稳妥？
别一上来就试 color 或 luminosity——Safari 15.4 之前全忽略，Firefox 对 exclusion 渲染也不一致。
anything-to-html
下载
将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。
-
multiply：适合浅色纹理压暗底色（如米白底 + 灰噪点），兼容性最好 -
screen：适合深色纹理提亮底色（如藏青底 + 白网点），移动端也稳 -
overlay：自动判断明暗倾向，统一色调最省心，但 iOS/Android 开启 Display P3 色彩管理时可能偏灰，真机要测
background-blend-mode 和 mix-blend-mode 别混用
这是两个完全不同的合成路径，目标对象和约束条件都不重合。
立即学习“前端免费学习笔记（深入）”；
-
background-blend-mode作用于单个元素的多个背景层（比如background-image: url(a.jpg), linear-gradient(red, transparent)），不依赖 DOM 结构，也不怕 stacking context -
mix-blend-mode是元素级混合，能混合<img>、<div>、<p>等任意可渲染内容，但必须满足兄弟 + 同 context + 视觉重叠三要素 - 设置了
position: relative+z-index的容器，再加mix-blend-mode，常使background-blend-mode失效 - 别在
@keyframes里动态改background-blend-mode—— 强制整块重绘，旧 iPad 明显掉帧
background-blend-mode 的生效前提非常刚性——它不接受“差不多”，只要图层数、声明方式、资源状态、origin 设置中有一项不满足，就彻底静默，连 warning 都不报。 
