javascript - カバー付きの全画面背景、ただし画像の一部に焦点を当てる

Question

div全体をカバーする背景画像をdivに持たせたいのですが、ブラウザーウィンドウのサイズが変更されて縮小しすぎず、画像上のポイントに焦点を合わせます。

良い例はこれですが、代わりにウィンドウのサイズを小さくすると、画像の中央ではなく黄色のサインに焦点が当てられます。

この種のプラグインやチュートリアルはありますか? jquery と css のイメージスプライトを使用して何かを思い付くことができると確信していますが、何かを一緒にハッキングするのではなく、実績のあるプラグインまたは手法を使用したいと考えています。

score 8 · Accepted Answer

これは私が想像していたほど難しくはなかったと思いますが、これを行うだけで、私が望んでいた動作を実現できます。

{
background: url('http://farm8.staticflickr.com/7218/7289572558_44c110c510_h.jpg') no-repeat 95% 50%;
min-height: 100%;
background-size: cover;
}

score 1 · Accepted Answer

背景位置やその他の編集を追加できます..

このように調整する必要があります..

background: url('IMG.PNG') no-repeat center center;
min-height: 100%;
background-size: cover;

ポジショニングサポートの提供

background-position-x: -100px;
background-position-y: 100px;

ただし、トリミングするため、背景のサイズを考慮する必要があります。

BG のサイズをドキュメントサイズに制限しないことを検討する場合は、BG を配置して (画像がユーザーの画面よりも大きい場合)、overflow:hidden を使用してそれらのスクロールバーを削除できますが、それでも最もエレガントな方法ではありません。

2 に答える 2