Question

问题是：我有一个巨大的背景图像和具有这些特征的内容：

内容以margin: auto;为中心，且宽度固定
内容的位置与图像有关（就像它适合图像的中间一样）
此连接仅是水平连接（垂直滚动会按预期移动所有内容）

实际上，这种方法在背景图像上固定位置的桌面设备上运行良好。

但问题是：当我调整窗口大小直到它小于内容时，内容固定在左侧，但背景图像仍然按照预期居中。在这种情况下，两个元素之间的连接都会丢失。

我有这个JavaScript可以解决这个问题，但这当然是一些我想要避免的开销，因为由于计算的原因它在任何时候都不平滑：

$(window).resize(function(){
    container.css('left', (body.width() - img.width()) / 2);
});

我也尝试过这样的事情：

<div id="test" style="
    position: absolute;
    z-index: 0;
    top: 0;
    left: 0;
    width: 100%:
    height: 100%;
    background: transparent url(path) no-repeat fixed center top;
"></div>

但这导致了上述相同的问题。

这个问题有没有优雅的CSS解决方案？

演示

Try it yourself

注意

图像大小是固定且已知的，并且它永远不会被浏览器缩放。

Answer 1

这适合你吗？ http://jsfiddle.net/wPmrm/24/

<强> HTML

<div class="background">
<div class="content">
    CONTENT
    <br><br>
    This example works fine until you the viewport size gets smaller than this content. After that the image isn't sticky anymore.
    <br><br>
    And check out vertical scrolling.

    <div style="height:1500px;"></div>
    END
</div>
</div>

<强> CSS

div.background {
    min-width: 740px;
    background: url('http://placehold.it/1600x1050') top center fixed no-repeat;
}

div.content {
    width: 700px;
    height: 2000px;
    margin: auto;
    padding: 50px 20px;
    background: none;
    opacity: 0.7;
    color: #333;
}

.background应该是.content的包装器，具有居中的背景，并且最小宽度为.contents width + padding。

评论更新：

http://jsfiddle.net/wPmrm/28/

我们必须使用媒体查询，因此当宽度达到最大740px时，我们会更改背景位置。哦，我们再次将背景附件设置为固定。

添加了CSS

@media screen and (max-width:740px) {
    div.background {
        background-position: -435px 0;
    }
}

我不明白为什么它是-435px（（1600-740）/ 2将是430）但它似乎是最准确的值。

固定背景图像水平连接到固定宽度的内容

1 个答案: