Question

我一直在处理一天的问题，我似乎无法解决它。我有四张图片要用作<body>标签上的CSS背景。它们应该作为页面的角对齐。

根据多个资源，我应该将min-height和html元素上的body设置为100％，如果我希望我的CSS背景的位置相对于整个内容我的页面（在视口下方延伸）而不仅仅是视口。但是，这不起作用。底部的两个角落图像似乎粘在视口的底部。

我正在将它用于CSS：

html {
    min-height: 100%;
    height: auto;
    margin: 0;
    padding: 0;
}
body {
    margin: 0;
    padding: 0;
    min-height: 100%;
    height: auto;
    background: url(../images/bgTopLeft.png) no-repeat left top, 
                url(../images/bgTopRight.png) no-repeat right top,
                url(../images/bgBottomLeft.png) no-repeat left bottom,
                url(../images/bgBottomRight.png) no-repeat right bottom;
}

我的HTML在这里应该不重要，因为我使用的是<body>标签，在那里做错了。如果有人想知道，则doctype是HTML5。

我已尝试将background-attachment的设置更改为fixed，我尝试了background-origin的各种设置，即使它似乎无法对我当前的问题做任何事情。我尝试将多个简写background分解为其中的所有单独语句。我无法让它发挥作用。

我宁愿不要将底部的两个角落图像粘贴到页面底部的页脚或div中，只是出于造型目的。我想要的是一个<body>标签，其中四个背景位于整个页面的四个角落，应该是可能的，我只是无法弄清楚这里发生了什么。

Answer 1

我已经用了一笔我认为你在这里想要实现的目标：

Codepen example

我使用background-size来调整背景图片的大小。您可能需要调整此项以匹配背景图像的大小：

例如：

background-size: 40px 40px, 40px 40px, 40px 50px, 60px 60px;

取决于图片的大小。

相对于整个页面而不是视口设置正文背景

1 个答案: