17

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

我有一个带有 div#container 的页面（一个 100% 最小高度的 div（IE 的高度）），其中包含一个页眉、一个“页面内容”和一个页脚。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 居中，!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 的右上角。

希望你们能帮助我！

4

5 回答 5

16

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

于 2010-08-20T20:03:28.203 回答
4

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

于 2013-04-22T18:17:41.267 回答
0

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

于 2021-10-05T00:53:51.443 回答
-1

您应该尝试添加background-origin属性，也许该border-box值会解决您的问题。此外，您可能想要定义background-size、记住cover并contain受支持且非常有用。

于 2013-06-17T01:19:59.457 回答
-1

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

CSS的background-attachment属性来拯救。

在此处检查工作代码笔

和片段：

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

于 2020-07-16T05:04:42.527 回答