侧面没有容器的图像

Question

我希望页面内容的自定义背景颜色在视口中居中，最大宽度为 1280 像素，两侧的图像覆盖其余 space。我只想要语义相关的 HTML 像这样：

<footer>
  My contents
</footer>

没有这个毫无意义的容器

<footer>
  <div class="container">
    My contents
  </div>
</footer>

我得到的最接近的是这个 CSS:

footer {
  --content-width: min(1280px, 100vw);
  --pspace: calc(50vw - var(--content-width) / 2);
  padding: 0 var(--pspace);
  background: url('/black.png') 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;
}

现在我想要用纯色覆盖内容 space 而不是 black.png（这是一个黑色像素）（因此图像被剪切不显示在那里），但不是侧面 space（图像是半透明的），所以我想我不能使用 background-color。我想在 --col-bg CSS 变量中指定颜色。有办法实现吗？

我希望我可以像这样使用内联 SVG 作为背景图像

background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1 1'><path d='M0,0h1v1H0' fill='--col-bg'/></svg>"), ...

但是浏览器好像不接受这个。

Answer 1

<style>
    body {
        margin: 0;
    }
    footer {
        --content-width: min(1280px, 100vw);
        --pspace: calc(50vw - var(--content-width) / 2);
        --left: var(--pspace);
        --right: calc(100vw - var(--pspace));
        --bg-color: blue;
  
        padding: 0 var(--pspace);
        background: linear-gradient(90deg, rgba(0,0,0,0) var(--left), var(--bg-color) var(--left), var(--bg-color) var(--right), rgba(0,0,0,0) var(--right)),
            url('left.png') right var(--right) bottom/contain no-repeat,
            url('right.png') calc(var(--left) + var(--content-width)) bottom/contain no-repeat;

    }
</style>

<footer>
    My contents
</footer>

页脚必须为 100vw 宽，否则图像定位会中断。

我强烈推荐（出于理智原因）通常的方法 - max-width: 1280px; margin: auto; position: relative; + 绝对定位 ::before, ::after 这些图像。

侧面没有容器的图像

Images on the sides without container

css

svg