没有容器的侧面图像

Question

我想有自定义的背景颜色的页面内容，在视图中以最大宽度1280‘d为中心，两边的图像覆盖其余的空间。我只想要这样的语义相关的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;
}

现在，我不想使用black.png (它是一个黑色像素)，我希望有一个覆盖内容空间的纯色(因此图像被剪裁不显示在那里)，而不是边空间(图像是半透明的)，所以我想我不能使用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>

页脚必须是100 be宽，否则定位的图像中断。

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