CSS中如何将顶部SVG渐变背景置于黑色背景上层实现指定效果

核心背景堆叠规则 #

CSS背景的层级逻辑非常明确：

• background-image里写在最前面的图，视觉上在最上层
• 我们设置的background-color，永远在所有图片背景的最底下，不会盖过任何图片
  你现在只看到黑色背景，本质就是那个SVG没正常渲染出来，不是层级错了，是参数或者SVG本身的问题。

修复操作 #

• 先补全SVG的渲染参数
  默认情况下CSS背景图会重复平铺、尺寸自适应原图，如果你的SVG是顶部的窄条渐变，很容易因为默认参数导致显示异常。按下面的写法改样式：

  .body-element {
    /* 黑底放在最下层 */
    background-color: #000;
    /* 你的SVG渐变图 */
    background-image: url("data:image/svg+xml;base64, 你的实际编码内容");
    /* 关掉默认平铺，不然渐变会重复铺满整个页面 */
    background-repeat: no-repeat;
    /* 把SVG固定在容器顶部居中 */
    background-position: top center;
    /* 让SVG宽度撑满容器，高度按自身比例缩放 */
    background-size: 100% auto;
    text-align: left;
  }
  

• 检查SVG本身的内容问题
  很多时候base64的SVG不显示，是导出的时候漏了属性，你可以把base64串解码成普通SVG文本，检查两点：
  • 根标签有没有加viewBox和标准命名空间，比如<svg viewBox="0 0 1440 300" xmlns="http://www.w3.org/2000/svg">，没有的话浏览器会识别不了尺寸
  • 红色渐变的路径有没有被设成透明、或者超出viewBox的裁剪范围
• 多图层叠加的写法参考
  如果后续需要在黑底和SVG之间加其他纹理，直接把多个图地址用逗号隔开就行，写在越前面的图，层级越高：

  .body-element {
    /* 顺序：最上层是红SVG，中间层是纹理图，最底下是黑底 */
    background-image: url("红SVG的data地址"), url("纹理图地址");
    background-color: #000;
    /* 每个图的定位、尺寸用逗号按顺序对应 */
    background-position: top center, center;
    background-size: 100% auto, cover;
    background-repeat: no-repeat, no-repeat;
  }
  

内容的提问来源于stack exchange，提问作者Mistu