html - CSSでは、オーバーレイされた複数の画像をレスポンシブにスケーリングする方法は?

Question

背景の上に複数の画像を重ねています。例を次に示します。

<div style="position: relative; left: 0; top: 0;">
    <img src="images/background.png" style="position: relative; top: 0px; left: 0px;"/> 
    <img src="images/overlay1.png" style="position: absolute; top: 20px; left: 20px; "/>
    <img src="images/overlay2.png" style="position: absolute; top: 40px; left: 40px; "/>
</div>

上記のスニペットは、ブラウザが全画面表示モードの場合に機能します。ブラウザーのサイズを縮小すると、それに応じて background.png のみがスケーリングされますが、overlay1.png と overlay2.png は両方とも同じサイズのままで、その位置に固定されています。すべての位置属性を に変更しようとしましrelativeたが、オーバーレイ画像が間違った場所に表示されています。

これをリファクタリングして、div タグ内のすべての画像が互いに適切にスケーリングできるようにするにはどうすればよいですか? ところで、私は Twitter Bootstrap 2.3.2 をデフォルトの CSS テーマとして使用しています。

より詳しい情報。すべての画像は固定サイズです。たとえば、背景は 640x480 で、位置 0, 0 に表示されます。オーバーレイ画像も固定サイズで、背景画像に対して特定の位置に配置する必要があります。たとえば、オーバーレイは 64x64 で位置 15、24 (上、左) に移動し、別のオーバーレイは 128x128 で位置 200、231 などになります。これらの正確な位置のオーバーレイにより、背景 + オーバーレイが完全な画像になります。