css - CSS - 相对于内容的页眉/页脚背景

Question

我正在尝试对页眉和页脚具有不同背景的网站进行布局。所以这基本上是我的做法：

body{
    background: url(images/header.png) top center no-repeat,
            url(images/footer2.png) bottom center no-repeat,
                url(images/bg.jpg) fixed;
    background-size: contain, contain, auto;
}

我之所以选择这样做是因为当我为页眉和页脚（而不是正文）应用背景时，背景无法覆盖屏幕的宽度。但是有一个错误：当我放大或缩小时，只有内容的大小发生变化，而背景的大小保持不变，如下面的截图所示：

在这种情况下，最好的解决方案是什么？我正在寻找一个纯 CSS 解决方案（不必更改 HTML 标记）。请帮帮我，谢谢。

Answer 1

您的问题是contain在您的背景定义中使用。这使图像的大小与主体一样大，并且主体保持全尺寸。

尝试使用 repeat-x 而不是 no-repeat，并将背景大小的宽度部分设置为与标题元素的宽度相同的值。

除非我遗漏了一些东西，否则这应该使它可以匹配。