<body> 之外的背景图像？答案

【问题标题】：Background images outside of <body>?<body> 之外的背景图像？
【发布时间】：2014-04-01 19:34:18
【问题描述】：

我正在尝试定位背景图像，使其与现有的渐变背景对齐，该背景相对于 <html> 元素定位（即渐变图像出现在浏览器宽度的 92% 处，无论如何你调整窗口的大小）。

我将图像放在<div> 中，将图像相对于<div> 定位，并将<div> 相对于浏览器窗口定位。

例如。

<body>
  <div id="background-position-container">
    <img src="images/bubbles.png" id="background-corner-decoration" />
  </div>
</body>

与：

<style>
#background-position-container {
  position: absolute;
  width: 0px;
  height: 0px;
  top: 180px;
  left: 92%;
}

#background-corner-decoration {
  position: relative;
  /* tweak the position of the image so it lines up with the gradient */
  top: -176px;
  left: -118px;
  width: 216px;
  height: 477px;
  margin: 0px -118px -176px 0px;
}
</style>

这看起来效果不错，但是如果你水平缩小浏览器窗口，背景图片会导致<body>元素超出<html>元素，并出现滚动条。

我似乎可以通过创建<body> 的新同级元素并将<div> 放入其中来解决此问题：

<div id="background-page-container">
  <div id="background-position-container">
    <img src="images/bubbles.png" id="background-corner-decoration" />
  </div>
</div>
<body>
</body>

并添加：

#background-page-container {
  position: absolute;
  top: 0px;
  left: 0px;
  width: 100%;
  height: 100%;
  overflow: hidden;
}

这至少在 Firefox 中有效，但这似乎不是一个好的做法，我确信所有浏览器都不能正确呈现它。有没有更好的方法来完成我想要的，同时将所有显示元素保留在 <body> 中（也就是说，将背景图像剪裁在 <body> 的边缘而不是扩大它）？

感谢您的帮助，
gs.

编辑：根据要求，这里有 jsfiddles 来说明问题：

Hiigaran 的解决方案如下所示：http://jsfiddle.net/kn36A/
这是一个正确对齐的解决方案，但在重新调整窗口大小时会导致难看的滚动条：http://jsfiddle.net/w446Q/
这是迄今为止我拥有的“最佳”（？）解决方案，但它似乎违反了 HTML 最佳实践：http://jsfiddle.net/H2PLr/

到目前为止，我用 #3 测试过的每个浏览器似乎都可以正确呈现它——这个解决方案真的像我想象的那么糟糕吗？

再次感谢！
通用电气

【问题讨论】：

标签： css html background position element

【解决方案1】：

假设我没看错……

您可以通过用逗号分隔背景 CSS 来组合它们。因此，例如，如果您想将图像和渐变作为同一事物的背景，请尝试：

background-image: url('image.png'), linear-gradient(#bb0000, #0000bb);

然后您可以以相同的方式添加其他背景 CSS 属性，例如 background-position：

background-position:50px 50px, 0;

值的顺序很重要。第一组值 (50px 50px) 适用于图像，但不适用于渐变。第二个 background-position 值 (0) 适用于第二个 background-image 值，即渐变。

在您的 HTML 中使用它，您应该能够使用绝对值或相对值定位您的图像。

编辑：此外，如果您添加任何其他不带逗号的背景属性，那么您提供的值将适用于所有背景。例如，background-repeat:no-repeat 不会重复图像或渐变，但background-repeat:no-repeat,repeat 会以与位置值相同的方式应用于每个。

【讨论】：

您好，感谢您的回答。这种情况下的问题是渐变相对定位在浏览器宽度的 92% 处。如果我将图像定位为 92% 的背景，它将无法与渐变正确对齐。即使我调整图像的位置使其对齐，您需要做的只是调整浏览器窗口的大小，图像将不再与渐变对齐。所以我需要一种方法来定位图像，使其永远不会相对于渐变的位置移动。
查看原始帖子中的编辑。顺便说一句，如果背景图像设置为相同的 % 位置，我对相对于渐变移动的背景图像是错误的，但是如果您尝试通过将两个元素定位在不同的 % 位置来排列它们（例如渐变为 92%，但 93.45），则会发生这种情况图片百分比）。
这似乎有点太容易成为解决方案，但如果是这样，请检查一下：jsfiddle.net/H2PLr/1 我所做的只是从您链接的第三个小提琴中获取代码，然后将 div那是在体外进入它。与缩放进行并排比较，它似乎完全符合您的要求......我认为。
哇...你是对的！我不太明白为什么会这样（我认为把它放在 body 会导致包含的 div 成为 body 的宽度而不是 html），但它确实如此！ :) 非常感谢您的帮助！

【解决方案2】：

在另一个答案的 cmets 中，Hiigaran 通过简单地从解决方案 #3 开始并在

下移动包含外部的 div（称为“background-page-container”）来解决问题。所以没有必要像我想的那样让元素出现在之外。

gs.

【讨论】：