現在の CSS3 の推奨事項 (正確にはこの候補バージョン) は、背景画像を配置するための新しい可能性を提供します。これは、CSS スプライトを操作するときに非常に役立つ可能性があります。
背景を下に配置しながら、(画像の下から) オフセットを追加する可能性に特に興味があるので、次のようにします。
#container {
background-image:url(sprite.png);
background-position:bottom -100px left 0;
}
画像を取得し、要素sprite.png
の下部に貼り付けてから、 100 px下にドラッグして、その画像の下部 100 px が表示されないようにします。画像は、下から同じ高さまでいっぱいになります。#container
#container
これは、Chrome (バージョン 29.0.1547.76 m)、Firefox (24.0)、および IE10 で正常に動作します。しかし、IE9 ではテストできません。IE9 はこの新しい構文をサポートしていますか?
IE8 でテストできる古い Windows XP マシンを使用していますが、確実に動作しません。
編集
いくつかのテストを行う機会があり、IE9 で動作することを確認できました (Win7 Pro 32 ビットでテスト済み)。