CSS背景附件固定 - 流量不足？

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; 似乎可以解决您的问题。

来自the Sitepoint articlebackground-attachment：

固定值会阻止背景图像滚动 包含块。请注意，虽然固定的背景图像可能是 应用于整个文档的元素，它的背景位置 始终相对于视口放置。这意味着 背景图像仅在其背景位置时可见 与元素的内容、内边距或边框区域重合 它被应用。因此，固定的背景图像不会随 有滚动条的元素——见溢出——因为它被放置在 与视口的关系。

编辑：这是解决您的问题的一种可能方法：http://jsfiddle.net/ep6kQ/3/

编辑编辑：当用户滚动到包含元素下方时，图像消失时出现问题。有谁知道如何解决这个问题？

Answer 2

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