HTML不直接支持背景图片径向渐变，需用CSS的background-image配合radial-gradient()与url()逗号分隔叠加实现；渐变在上层可模拟聚光灯效果，transparent过渡软化边缘，background-blend-mode可融合但兼容性受限，切勿在background简写中混写渐变和图片。
HTML 本身不直接设置背景图片径向渐变，真正起作用的是 CSS 的 background 或 background-image 属性，配合 radial-gradient() 函数叠加图片（如 url()）实现“背景图片 + 径向渐变”的混合效果。
用 radial-gradient() 叠加图片实现光影遮罩效果
常见需求其实是：在一张背景图上叠加一个中心亮、边缘暗（或反之）的径向渐变，模拟聚光灯或柔焦光影。这不是“图片的渐变”，而是两层背景的叠加 —— 图片在底层，渐变在上层（或下层，靠 z-index 逻辑由堆叠顺序决定）。
-
radial-gradient()必须写在background-image里，多个值用逗号分隔，顺序从上到下（即第一个声明的图层在最上） - 想让渐变“压暗”图片，就用半透明黑色渐变：
radial-gradient(circle at center, rgba(0,0,0,0.2), transparent 70%) - 想让中心“提亮”，可用浅色渐变：
radial-gradient(circle at center, rgba(255,255,255,0.15), transparent 60%) - 注意：渐变默认是硬边，加
transparent过渡能软化边缘；circle和ellipse控制形状，at center定位中心点
body {
background-image:
radial-gradient(circle at center, rgba(0,0,0,0.25), transparent 75%),
url('bg.jpg');
background-size: cover;
background-position: center;
background-repeat: no-repeat;
}
background-blend-mode 能否让图片和渐变“融合”？
可以，但要小心兼容性和效果失控。该属性控制多层背景的混合模式（类似 Photoshop），比如 multiply 让渐变自然压暗图片，screen 则提亮高光区。但它对颜色敏感，纯黑/白渐变可能失效，且 IE 完全不支持。
- 必须确保
background-image中至少有两层（图片 + 渐变），否则无混合可言 - 推荐先用默认叠加（不设 blend-mode），再按需微调：
background-blend-mode: multiply; - 移动端 Safari 对
background-blend-mode支持良好，但旧版 Android Webview 可能渲染异常 - 调试时建议临时加
background-color: pink;看是否触发多层渲染（避免因路径错误导致只显示一层）
为什么 background: radial-gradient(...) url(...) 不生效？
这是典型语法错误。background 是简写属性，不能把渐变函数和 url() 并列写在同一层值里。CSS 解析器会直接忽略整个声明，或只取第一个合法值（通常是渐变，图片被丢弃）。
- 正确做法：统一用
background-image，显式列出所有图层 - 错误写法：
background: radial-gradient(...) url(...);→ 无效 - 错误写法：
background-image: radial-gradient(...) url(...);→ 依然无效（缺少逗号分隔） - 必须写成：
background-image: radial-gradient(...), url(...); - 如果还设了
background-size或background-position，记得它们也支持逗号分隔，与图层一一对应
真正难的是调参：渐变的透明度、扩散半径、位置偏移，稍一变动就容易过曝或死黑。建议用 Chrome DevTools 实时拖动 rgba() 的 alpha 值和百分比，边看边调，别凭感觉写数字。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
