如何实现SVG背景图上下区域不同底色且SVG置于最上层？

你之前把线性渐变设为background-color是误区——linear-gradient本质是背景图像，不是背景色，当同时设置background-color和background-image时，图像会直接覆盖颜色，达不到分层效果。

要实现「渐变背景在底层，SVG背景在上层」的需求，只需把渐变和SVG都作为background-image的多层背景，按「底层在前、上层在后」的顺序用逗号分隔，再分别配置各自的显示属性即可：

body {
  background-image: 
    /* 底层：上下分色的线性渐变 */
    linear-gradient(
      to bottom,
      var(--color-background-primary-light) 0%,
      var(--color-background-primary-light) 40%,
      var(--color-background-primary-dark) 40%,
      var(--color-background-primary-dark) 100%
    ),
    /* 上层：SVG背景图 */
    url("/images/bg-curvy-desktop.svg");
  /* 对应每个背景的size，顺序和background-image一致 */
  background-size: 100%, 100%;
  /* 对应每个背景的repeat规则 */
  background-repeat: no-repeat, no-repeat;
  /* 对应每个背景的位置，渐变铺满整个容器，SVG按需求定位 */
  background-position: 0 0, 50% 30%;
}

也可以用background复合属性简化写法，把位置、尺寸、规则整合在一起：

body {
  background: 
    linear-gradient(
      to bottom,
      var(--color-background-primary-light) 0%,
      var(--color-background-primary-light) 40%,
      var(--color-background-primary-dark) 40%,
      var(--color-background-primary-dark) 100%
    ) 0 0 / 100% no-repeat,
    url("/images/bg-curvy-desktop.svg") 50% 30% / 100% no-repeat;
}

注意事项 #

• 确保SVG本身是透明的，如果SVG自带不透明底色，会遮挡下方的渐变效果，需要提前编辑SVG移除纯色背景
• 若要调整图层顺序，直接调换background-image中两个元素的位置即可

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