CSS 背景附件已修复 - 流量不足？
我有一些像这样的 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 的右上角放置一个固定的背景图像。但是，当我放置背景附件：固定时，它似乎将其从流程中删除...
其中，图像没有放置在主程序的右上角，但似乎位于主程序的右上角页面，或者可能是容器。
在滚动模式下，它在主窗口中位置很好。仅当切换到固定时才有效。
是这样的吗？有办法解决这个问题吗？
I have some HTML like this:
<div id='container'>
<div id='main'>
</div>
</div>
And the 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;
}
The #main is the same width as its #container. Im trying to put a fixed background image on the top-right side of #main. However, when I put the background-attachment:fixed, it seems to remove it from the flow...
In that, the image, does not get placed in the top-right of main, but seems like the top-right side of the page, or possibly the container.
In scroll mode, it sits great in the main. it's only when a switch to fixed.
Is this how it works? Is there a way around this?
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（2）
不确定您到底想要实现什么目标，但希望这至少部分回答了您的问题。
我在此处重现了您的情况。如果我理解您想要正确执行的操作，则删除
background-attachment:fixed;似乎可以解决您的问题。来自有关
background-attachment的 Sitepoint 文章：编辑：这是解决您的问题的可能方法：http://jsfiddle.net/ ep6kQ/3/
编辑编辑：当用户滚动到包含元素下方时，图像消失时出现问题。有人知道如何解决这个问题吗？
Not sure exactly what you're trying to achieve, but hopefully this at least partially answers your question.
I've recreated your situation here. Removing
background-attachment:fixed;seems to fix your problem if I understand what you're trying to do correctly.From the Sitepoint article on
background-attachment:EDIT: Here's a possible way to solve your problem: http://jsfiddle.net/ep6kQ/3/
EDIT EDIT: Having issues getting the image to disappear when the user scrolls below the containing element. Anyone know how to fix this?
删除固定并在图像上的 CSS 中使用边距属性。这是一个丑陋的修复，但它可能会起作用。也可以尝试使用绝对而不是固定。 （我现在无法测试，安装软件。）呃。
Remove fixed and use your margin properties in CSS on the image. It's an ugly fix but it would probably work. Also might try using absolute instead of fixed. (I can't test at the moment, installing software.) Ugh.