如何修复div内的背景图像

Question

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

我有一个带有 div#container 的页面（一个 100% 最小高度（IE 高度）的 div），其中包含一个页眉、一个“页面内容”和一个页脚。 div#container 的背景图片应该是固定的（不是固定的位置，而是background-attachment: fixed 滚动时图片跟随）。

问题是，当 CSS 中的背景标签添加固定附件时，背景图片现在位于 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 居中，第一个 height: 中的 !important 是让 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

没有足够的积分来评论上述解决方法。虽然您可以使用 background-attachment: fixed 为 div 图像仍附加到视口，您只能看到图像的一部分。如果您尝试显示完整的图像，则没有多大用处。

Answer 2

这是大约。 10 年前的问题，但人们最终可能仍会像我一样在这里寻求解决方法。

CSS 的background-attachment 属性来救场了。

Check working codepen here

还有sn-p：

.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>

Answer 3

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

Answer 4

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

Answer 5

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