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 的右上角放置一个固定的背景图像。但是，当我放置 background-attachment:fixed 时，它似乎从流程中删除了...

在那里，图像并没有放置在 main 的右上角，而是看起来像是页面的右上角，或者可能是容器。

在滚动模式下，它位于主要位置。只有当切换到固定时。

它是这样工作的吗？有解决办法吗？

Answer 1

不确定您要实现的确切目标，但希望这至少能部分回答您的问题。

我重现了你的情况here .删除 background-attachment:fixed; 似乎可以解决您的问题，如果我理解您要正确执行的操作的话。

来自 the Sitepoint article在 background-attachment 上:

The value fixed stops the background-image from scrolling with its containing block. Note that although the fixed background-image may be applied to elements throughout the document, its background-position is always placed in relation to the viewport. This means the background-image is only visible when its background-position coincides with the content, padding, or border area of the element to which it is applied. Thus, a fixed background-image doesn’t move with elements that have a scrollbar—see overflow—because it’s placed in relation to the viewport.

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

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