cross-fade() 函数已被移除且现代浏览器均不支持，调用会导致背景失效；替代方案包括 background-blend-mode 叠加、双 img 元素 opacity 控制或 Canvas/SVG 实现精确比例混合。
cross-fade() 函数在现代浏览器中基本不可用
cross-fade() 是 CSS 早期草案中提出的函数，曾出现在 CSS Image Values Level 4 的早期版本里，但已被移除。目前（截至 2024 年），Chrome、Firefox、Safari 均不支持该函数，调用它不会产生混合效果，而是直接解析失败，回退为 background-image 的初始值（通常是 none）或触发渲染异常。
常见错误现象包括：background-image: cross-fade(50%, url(a.jpg), url(b.jpg)); 在开发者工具中显示为无效声明，元素背景消失，控制台无报错但样式不生效。
替代方案：用 background-blend-mode 实现两张图叠加混合
如果目标是让两张图片在同一容器内按比例“视觉上混合”，background-blend-mode 是最接近的可行方案，但它不接受百分比权重参数，而是通过图层顺序和 blend mode 控制混合强度。
- 必须使用两个
background-image层（逗号分隔），例如：background-image: url(a.jpg), url(b.jpg); - 叠加顺序重要：第一个图在上层，第二个在下层；混合效果由
background-blend-mode决定，如multiply、screen、overlay - 若需“50% 透明感”，可给上层图加
background-color模拟半透效果，例如：background-color: rgba(255,255,255,0.5); background-blend-mode: overlay; - 注意：此方法要求两张图尺寸一致，否则拉伸/裁剪行为由
background-size和background-position共同决定
真正可控比例混合：用 Canvas 或 CSS mask + opacity 拆解实现
如果必须精确控制 A 图占比 30%、B 图占比 70%，CSS 本身没有原生函数能做到——cross-fade() 不可用，background-blend-mode 也不接受权重参数。这时得换思路：
立即学习“前端免费学习笔记（深入）”；
- 用两个重叠的
<img>元素，分别设opacity（如 0.3 和 0.7），再用position: absolute叠在一起；缺点是无法响应式缩放对齐，且非语义化 - 用
<canvas>手动 drawImage + globalAlpha，完全可控，但失去 CSS 原生性能和 declarative 优势 - 用 SVG
<image>+<mask>或<feBlend>，支持 alpha 权重，但兼容性弱于 Canvas，且嵌入复杂
简单示例（双 img 叠加）：
div { position: relative; width: 300px; height: 200px; }
div img { position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover; }
div img:first-child { opacity: 0.4; }
div img:last-child { opacity: 0.6; }
别被 MDN 或旧教程误导：查 support 表要认准“current status”
MDN 页面曾长期保留 cross-fade() 文档，但顶部已标注 “This feature is not on a current W3C specification”。很多中文教程仍把它当有效函数讲，是因为抄录了过时草案内容。
验证方式很简单：打开 Chrome DevTools → 新建一个 div → 在 Styles 面板里手动输入 background-image: cross-fade(50%, url(1.jpg), url(2.jpg)); → 看是否被划掉或标红。只要被标记为 invalid，就说明当前环境不支持。
真正需要比例混合时，优先考虑业务场景是否允许用 JS 控制 canvas，或者接受 background-blend-mode 的视觉近似效果——硬套 cross-fade() 只会浪费调试时间。
