17370845950

HTML不直接支持背景图片径向渐变，需用CSS的background-image配合radial-gradient()与url()逗号分隔叠加实现；渐变在上层可模拟聚光灯效果，tran

sparent过渡软化边缘，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 值和百分比，边看边调，别凭感觉写数字。