透明な画面で、4つの電話の画像が隣り合っています。ブラウザーの画面サイズを変更すると、電話同士が近づきます。
電話の画面を通して見える背景画像があるはずですが、コンテナに背景画像を使用して各電話画面を透明にすることはできません。これは、次のように、1 つの電話の下に別の電話が表示されるためです。
他に試したこと：
- コンテナーの background-image を各phone-divに配置しましたが、機能しませんでした。ブラウザー ウィンドウのサイズを変更するときに、背景の位置をパーセンテージで指定すると、画像の正しい部分が切り取られないようです (*)
- 画面を表す各 phone- liにdivを配置します。% はコンテナーではなくliである親要素のサイズに相対的であるため、各電話の正しい位置に画像をオフセットできませんでした
これは CSS で実装できますか、それとも Javascript を調べて正しい画像オフセットを設定する必要がありますか?
編集:
* (1) 明確にするために、このフィドルでは、ウィンドウを移動する-div の位置は、その位置に基づいて画像の正しい部分を表示します。パーセンテージではなく絶対ピクセルで指定されているためでしょうか。http://jsfiddle.net/XjCCK/39/
.moving {
left: left,
top: top,
backgroundPositionX: -left,
backgroundPositionY: -top
}