Question

我发现了一个相当奇怪的问题，我想我知道如何解释;我只是不知道如何解决它！

我有一个带有div＃container（一个100％min-height（IE的高度）的div）的页面，其中包含一个标题，一个“页面内容”和一个页脚。 div＃container的背景图像应该是固定的（不是固定位置，而是background-attachment: fixed，这使得图片在滚动时跟随）。

问题是，当固定附件添加到CSS中的background-tag时，背景图片现在位于div之外。

CSS如下:(没有background-attachment: fixed;）

div#container {
    position:relative;
    width:900px;
    margin:0 auto;
    background-color: #ccffff;
    background-image: url("pics/sign.jpg");
    background-repeat: no-repeat;
    background-position: right top;

    height:auto !important;
    height:100%;

    min-height:100%;
}

margin:0 auto;是将div居中，第一个!important中的height:事件是让IE忽略该特定的高度标记。如果min-height: 100%应该有效，则必须这样做。

当我添加这个......

div#container {
    position:relative;
    width:900px;
    margin:0 auto;
    background-color: #ccffff;
    background-image: url("pics/sign.jpg");
    background-attachment: fixed; //This is what is added to the code-sample
    background-repeat: no-repeat;
    background-position: right top;

    height:auto !important;
    height:100%;

    min-height:100%;
}

......背景图片正在移动到div之外。让我解释一下：背景图像中唯一可见的部分仍然是<div id="container">内的部分，但是图像的一部分移动到了div之外，现在看不见了。

总结......

当背景图像被修复时，背景图像被部分隐藏，移动到div之外。图像位于浏览器窗口的右上角，而不是div的右上角。

希望你们能帮助我！

Answer 1

这种行为实际上是正确的。任何attachment: fixed的背景都将相对于视口而不是它应用的元素。这实际上是Eric Meyer的Complex Spiral演示的基础。

Answer 2

虽然div中没有固定的背景位置，但最简单的解决方案是创建一个与图像大小相同的div。将图片作为背景，并使用position:absolute将图片设置为您想要放置的div的右上角的right:0px;top:0px。确保父div为position:relative，否则它不会完全位于该div中。

Answer 3

您应该尝试添加background-origin属性，也许border-box值可以解决您的问题。您也可以定义background-size，请注意cover和contain是受支持且非常有用的。

Answer 4

这是大约。已有10年的历史了，但人们可能仍然像我一样最终在这里寻求解决方法。

可以使用CSS的background-attachment属性。

Check working codepen here

代码段：

.fixed {
  background: url('http://lorempixel.com/800/800/');
  background-attachment: fixed;
height: 400px;
  width: 50%;
  max-width: 600px;
  margin: 32px auto;
}
.extra-space {
  margin-bottom: 100px;
  margin-top: 100px;
}

<div class="extra-space">
</div>
<div class="fixed"><h1>This is my heading</h1>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
</div>
<div class="extra-space">
</div>

如何修复div中的背景图像

总结......

4 个答案: