Question

我正在尝试定位背景图像，使其与现有的渐变背景对齐，该背景位于<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似乎都正常呈现 - 这个解决方案真的和我想的一样糟糕吗？

再次感谢！
GS。

Answer 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将以与位置值相同的方式应用于每个。{/ p>

Answer 2

在其他答案的评论中，Hiigaran通过简单地从解决方案＃3开始并在＆lt; body＆gt;下移动外部包含div（称为＆＃34; background-page-container＆＃34;）来解决问题。因此，不需要在＆lt; body＆gt;之外出现元素。正如我所想的那样。

GS

外面的背景图片？

2 个答案: