cross-fade()函数未被主流浏览器支持，生产环境禁用；推荐双背景图层叠+background-blend-mode或Canvas像素级混合实现。
cross-fade() 函数不被主流浏览器支持，别用它做生产环境图片混合
截至 2024 年底，cross-fade() 仍处于 CSS Images Level 4 的草案阶段，Chrome、Firefox、Safari 均未实现该函数（调用会直接忽略，回退为第一张图或透明背景）。你在 DevTools 里写 background: cross-fade(70% url(a.jpg), url(b.jpg));，实际渲染的只是 url(a.jpg)，且控制台不会报错——这是最危险的坑。
替代方案：用两个 background-image 层叠 + background-blend-mode
这是目前兼容性最好、可控性最强的方式。核心思路是把两张图作为同一元素的多层背景，用混合模式叠加，并通过 background-size 和 background-position 对齐，再用 opacity 或 rgba() 调节权重。
关键点：
-
background-blend-mode: multiply、screen、overlay等模式对明暗敏感，适合照片；normal配合透明度更接近“线性插值”语义 - 两张图必须尺寸一致，否则需用
background-size: cover或显式设为相同px/% - 第二层背景默认在顶层，所以给第二张图设
opacity: 0.3（对应 30% 权重），第一张保持 1.0，就等效于 70%/30% 混合
div {
width: 400px;
height: 300px;
background-image: url('a.jpg'), url('b.jpg');
background-size: cover;
background-position: center;
background-blend-mode: normal;
/* 第一层（a.jpg）不透明，第二层（b.jpg）半透明 */
/* 注意：opacity 作用于整个元素，所以要用伪元素隔离 */
}更稳妥的做法是用 ::before 分离图层：
立即学习“前端免费学习笔记（深入）”；
实现 Markdown↔ HTML 互转，支持导出 PDF，用于用户请求的文档格式转换。
div {
position: relative;
width: 400px;
height: 300px;
}
div::before {
content: '';
position: absolute;
inset: 0;
background: url('a.jpg');
background-size: cover;
}
div {
background: url('b.jpg');
background-size: cover;
opacity: 0.3; /* 控制第二张图权重 */
}需要精确比例控制？用 Canvas 手动实现 cross-fade 逻辑
当设计稿明确要求“70% 图 A + 30% 图 B”的像素级线性插值（即每个通道： result = a * 0.7 + b * 0.3），CSS 无法保证，必须上 Canvas。
步骤简述：
- 创建
<canvas></canvas>，设宽高与目标容器一致 - 用
ctx.drawImage()分别把两张图绘制到同一 canvas 上 - 调用
ctx.getImageData()获取像素数据，遍历 RGBA 数组，按比例加权计算新值 - 用
ctx.putImageData()写回
注意：getImageData() 受同源策略限制，跨域图片需提前设置 img.crossOrigin = 'anonymous'，否则会触发安全错误 SecurityError: Failed to execute 'getImageData' on 'CanvasRenderingContext2D'。
为什么不用 SVG <feblend></feblend>？
SVG 的 <feblend mode="normal"></feblend> 理论上支持 alpha 混合，但实际中：in 和 in2 输入源必须是 SVG 图形或滤镜输出，不能直接接外部 JPG/PNG；若用 <image></image> 引入图片，又受限于 SVG 外部资源加载时序和跨域问题。调试成本远高于 Canvas 方案，且移动端兼容性波动大。
真正要落地，优先选双背景 + 伪元素方案；需要像素精度或动态比例，就上 Canvas——别在 cross-fade() 上浪费时间查兼容表了。
