如何修复div内的背景图像

Posted 2023-02-16

【中文标题】如何修复div内的背景图像

【英文标题】：How to fix background image inside div

【发布时间】：2011-04-01 20:34:17

【问题描述】：

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

我有一个带有 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 的右上角。

希望大家能帮帮我！

【参考方案1】：

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

【讨论】：

您的答案可以通过额外的支持信息得到改进。请edit 添加更多详细信息，例如引用或文档，以便其他人可以确认您的答案是正确的。你可以找到更多关于如何写好答案的信息in the help center。

【参考方案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>

【参考方案3】：

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

【参考方案4】：

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

【参考方案5】：

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

【讨论】：

是否有任何解决方法会导致我想要的“不正确行为”？ :)

不是我发现的。对不起:-(

我也想要一个解决方案。我认为他不是在问为什么会这样，而是在问如何将滚动图像修复到 div。

而且，目前还没有办法做到这一点。这个答案就是原因。