1

我有一些这样的 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 的右上角，而是看起来像页面的右上角，或者可能是容器。

在滚动模式下，它主要是很好的。只有当切换到固定时。

这是它的工作原理吗？有没有解决的办法？

4

2 回答 2

1

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

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

来自Sitepoint文章background-attachment：

固定值阻止背景图像与其包含块一起滚动。请注意，虽然固定的背景图像可以应用于整个文档的元素，但它的背景位置总是相对于视口放置。这意味着背景图像仅在其背景位置与应用它的元素的内容、填充或边框区域一致时才可见。因此，固定的背景图像不会随具有滚动条的元素一起移动（参见溢出），因为它是相对于视口放置的。

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

编辑编辑：当用户滚动到包含元素下方时，图像消失时出现问题。有人知道怎么修这个东西吗？

于 2011-09-20T16:46:20.233 回答
0

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

于 2011-09-20T16:35:21.727 回答