2

ここで説明する最初の手法を使用して、ブラウザに比例して拡大縮小する「全画面」の背景画像を作成しています。

画像コンテナーの私の CSS は次のとおりです。

.fs-img {
    position: fixed;
    top: 4.5em;
    right: 0;
    bottom: 0;
    left: 0;
    background: url('image.jpg') no-repeat center center fixed; 
    background-size: cover;
}

max-widthしかし、1200pxの私のサイトに設定したいと思います。もちろん、これを body 要素に適用しても、 であるため、画像に影響はありませんposition: fixed。

それで、最大幅の全画面画像を下部に固定したままにする別の方法はありますか?

これが私がテストしているデモサイトです。

4

1 に答える 1

5

次のスタイルを使用して、目的を達成できると思います。

.fs-img {
    position: fixed;
    top: 4.5em;
    right: 50%;
    bottom: 0;
    left: 50%;
    margin:0 -600px;
    background: url(image.jpg) no-repeat center center; 
    background-size: cover;
}

例

于 2013-10-30T15:57:55.610 に答える