3

問題は次のとおりです。これらの特性を備えた巨大な背景画像とコンテンツがあります。

  • コンテンツは中央に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ソリューションはありますか？

デモ

自分で試してみてください

ノート

画像サイズは固定されており、既知であり、ブラウザによって拡大縮小されることはありません。

4

1 に答える 1

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の場合、背景の位置を変更します。ああ、background-attachmentを再びfixedに設定しました。

CSSが追加されました

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

-435px（（1600-740）/ 2は430）である理由はわかりませんが、最も正確な値のようです。

于 2012-07-02T16:16:55.447 に答える