无需额外容器实现内容区居中+侧边背景图+自定义内容区背景色咨询

解决方案 #

你之前的SVG方案不生效，是因为data URI内的SVG属于独立文档，无法继承外部CSS作用域的变量，同时特殊字符未转义也会导致解析失败。
这里有一个完全符合需求的轻量实现方案，不需要额外引入图片资源，也不用修改HTML结构：用同色线性渐变模拟纯色块，原生支持CSS变量调用。

完整代码

footer {
  --content-width: min(1280px, 100vw);
  --pspace: calc(50vw - var(--content-width) / 2);
  --col-bg: #ffffff; /* 可自定义为任意颜色，支持半透明值 */
  padding: 0 var(--pspace);
  background: 
    /* 替换原有black.png的位置，用渐变生成纯色块 */
    linear-gradient(var(--col-bg), var(--col-bg)) var(--pspace) 0/var(--content-width) 100% no-repeat,
    url('/image-left.png') left bottom/contain no-repeat, 
    url('/image-right.png') right bottom/contain no-repeat;
}

实现说明

• 两个色值相同的线性渐变渲染效果和纯色色块完全一致，不需要额外加载图片资源
• 渐变的定位、尺寸参数完全沿用你原有配置，只会覆盖中间1280px宽度的内容区域，不会影响两侧的背景图展示
• 支持直接通过--col-bg变量自定义内容区背景色，不会出现全局background-color覆盖侧边半透明图的问题

内容的提问来源于stack exchange，提问作者Jan Turoň