1

複数の画像レイヤーを持つ新しいHTML5ページを作成しています。最初のレイヤーは、フルスクリーン画像（画面サイズに比例）である背景レイヤーです。

2番目のレイヤーは別の画像オブジェクトであり、最初のレイヤーに比例した固定位置に配置したいと考えています。したがって、ブラウザのサイズを変更すると、2つの画像の両方のサイズが変更され、互いに比例します。

誰かが私がそうすることができる方法を知っていますか？

4

1 に答える 1

2

それでは、「sky.jpg」の背景画像とその上に「sun.png」の画像があるとしましょう。

HTML(5) コードは次のとおりです。

<div id="sky">
<img src="sun.png" id="sun">
</div>

レスポンシブ CSS は次のとおりです。

#sky {
    width:100%; /* width in percentage, so it will adapt to user's screen */
    height:600px; /* here i've set a fixed height, but maybe it's not what you want */
    background:url(sky.jpg) top center no-repeat;
    text-align:center; /* #sun will be centered, not sure it's what you need */
    background-size:cover;
    -moz-background-size:cover;
}
#sun {
    width:15%; /* adjust it to the needed ratio */
    max-width:300px; /* max-width will prevent it from being bigger than the original image */
    min-width:20px; /* min-width is optional */
}

ライブ デモ(ウィンドウのサイズを変更)

background-sizeプロパティが に設定されていることに注意してくださいcover(詳細はこちら)。

これは、幅と高さの両方が背景の配置領域を完全にカバーできるように、縦横比が最小サイズに維持されることを意味します。

そのため、ほとんどの解像度よりも大きな画像が必要です (ボディ背景画像の場合)。

このプロパティの他の可能な値は、「contain」と「auto」です (仕様を見てください)。

background-size:cover;はIE8 ではサポートされていません(そのため、バックグラウンド ポジショニング用にまだ追加top centerしています)。一部の FF バージョンでは、ベンダー プレフィックス ( -moz-)が必要です。

#sun の幅をパーセンテージで設定できるようになりました。これにより、含まれる div との比率が維持されます。元のサイズよりも大きくならないようにするには、 a max-width(および最終的にはmin-width) を設定します。

最新のブラウザでは、画像の高さが自動調整されます。

#sky の高さを固定したくない場合は、コンテナの高さが auto (デフォルト値) とは異なることを確認してください。

たとえば、#sky がページの背景画像である場合、次のように設定する必要があります。

html, body { height:100%; }
#sky { height:100%; }
于 2012-09-23T13:01:24.217 に答える