背景附件的 CSS 问题：已修复；
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/7223196/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
CSS problem with background-attachment:fixed;
提问by Alexander Talavari
I have a Joomla site that i have created a custom theme. The site is http://esn.teipir.gr/.
我有一个 Joomla 网站，我创建了一个自定义主题。该网站是http://esn.teipir.gr/。
I have two images right and left that i want them to have background image fixed.
我有两个图像左右，我希望他们有固定的背景图像。
I use the following CSS rules
我使用以下 CSS 规则
div.backgroundboxleft {
background-attachment: fixed;
background-image: url("/images/back_1.png");
float: left;
height: 822px;
top: 40px;
width: 457px;
}
and
和
div.backgroundboxright {
background-attachment: fixed;
background-image: url("/images/back_2.png");
float: right;
height: 822px;
top: 40px;
width: 457px;
}
If i remove the background-attachment all is OK with the images but when i add with firebug the following code everything messes up.Can you help me making the pages stay fixed without the background color being on top of the image?
如果我删除背景附件，所有图像都可以，但是当我使用 firebug 添加以下代码时，一切都会混乱。你能帮我使页面保持固定，而背景颜色不在图像顶部吗？
Thanks
谢谢
回答by tw16
When you set background-attachment:fixedit fixes the background in relation to the window. So you would then need to adjust the background-positionof your images so they appear in the right place. If you replace your backgroundproperties with the css below it will line up properly.
当您设置background-attachment:fixed它时，它会修复与窗口相关的背景。因此，您需要调整background-position图像的 ，以便它们出现在正确的位置。如果您用background下面的 css替换您的属性，它将正确排列。
div.backgroundboxleft {
background-image: url("/images/back_1.png");
background-attachment: fixed;
background-position: 0 44px;
background-repeat: no-repeat;
}
div.backgroundboxright {
background-image: url("/images/back_2.png");
background-attachment: fixed;
background-position: 1323px 44px;
background-repeat: no-repeat;
}
Live example: http://jsfiddle.net/tw16/6fZ96/embedded/result/
现场示例：http: //jsfiddle.net/tw16/6fZ96/embedded/result/
To clarify background-attachment:fixedstops the background from scrolling with the window. So if your viewport is too small and you have to scroll horizontally or vertically the background will not move (i.e. it will be overlapped). More information can be found here.
澄清background-attachment:fixed阻止背景随窗口滚动。因此，如果您的视口太小而您必须水平或垂直滚动背景将不会移动（即它会重叠）。可以在此处找到更多信息。
