Question

我有一些像这样的HTML：

<div id='container'>

    <div id='main'>

    </div>

</div>

和CSS

div#container {
    width:960px;
    margin:0 auto;
}

div#main {
    background: #000000 url('images/bg_placeholder.jpg') no-repeat 85% 100px fixed;
    color:white;
    padding-bottom:30px;
}

#main与#container的宽度相同。我试图在#main的右上角放置一个固定的背景图像。但是，当我把背景附件：固定时，它似乎将它从流程中移除......

在那里，图像不会放在main的右上角，但看起来像是页面的右上角，或者可能是容器。

在滚动模式下，它在主要位置很好。只有在切换到固定时才会这样。

这是如何运作的？有办法解决这个问题吗？

Answer 1

不确定您想要达到的目标，但希望这至少可以部分回答您的问题。

我重新创建了你的情况here。如果我了解您正在尝试正确执行的操作，则删除background-attachment:fixed;似乎可以解决您的问题。

来自background-attachment上的the Sitepoint article：

固定值会阻止背景图像滚动包含块。请注意，虽然固定的背景图像可能是适用于整个文档中的元素，其背景位置始终与视口相关。这意味着 background-image仅在其背景位置时可见与元素的内容，填充或边框区域重合应用它。因此，固定的背景图像不会移动具有滚动条的元素 - 请参阅溢出 - 因为它已放入与视口的关系。

编辑：以下是解决问题的可能方法：http://jsfiddle.net/ep6kQ/3/

编辑编辑：当用户滚动到包含元素下方时，导致图像消失的问题。任何人都知道如何解决这个问题？

Answer 2

删除固定并在图像上使用CSS中的边距属性。这是一个丑陋的修复，但它可能会工作。也可以尝试使用绝对而不是固定。（我现在无法测试，安装软件。）呃。

CSS后台附件已修复 - 流出？

2 个答案: