背景附件 :fixed; 的 CSS 问题

Question

我有一个 Joomla 网站，我创建了一个自定义主题。网址是http://esn.teipir.gr/ .

我有左右两张图片，我希望它们的背景图片是固定的。

我使用以下 CSS 规则

div.backgroundboxleft {
    background-attachment: fixed;
    background-image: url("/images/back_1.png");
    float: left;
    height: 822px;
    top: 40px;
    width: 457px;
}

和

div.backgroundboxright {
    background-attachment: fixed;
    background-image: url("/images/back_2.png");
    float: right;
    height: 822px;
    top: 40px;
    width: 457px;
}

如果我删除背景附件，图像一切正常，但是当我使用 Firebug 添加以下代码时，一切都搞砸了。你能帮我让页面保持固定，而背景颜色不在图像顶部吗？

谢谢

Answer 1

当您设置 background-attachment:fixed 时，它会固定相对于窗口的背景。因此，您需要调整图像的 background-position 以使其显示在正确的位置。如果您用下面的 css 替换您的 background 属性，它将正确排列。

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;
}

实例:http://jsfiddle.net/tw16/6fZ96/embedded/result/

澄清 background-attachment:fixed 阻止背景随窗口滚动。因此，如果您的视口(viewport)太小并且您必须水平或垂直滚动​​，背景将不会移动(即它会重叠)。可以找到更多信息here .