cssの背景イメージで画像をプリロードしますか？

Question

いくつかの画像を保持するビューポートの外側の固定位置divで画像をプリロードする簡単な周知の方法があります。

実際にはCSSの背景プロパティを使用してコンテンツのないdivに複数の画像を適用するのは同じですか？

ようですか？

<div id="preload"></div> 

#preload { 
    position: absolute; 
    overflow: hidden; 
    left: -9999px; 
    top: -9999px; 
    height: 1px; 
    width: 1px; 
    background: transparent url("../images/misc/formLoader.gif") no-repeat center center; 
    background: transparent url("../images/misc/selectLoader.gif") no-repeat center center; 
    background: transparent url("../images/misc/projectLoader.gif") no-repeat center center; 
} 

これは実際に動作しますか？または、最後のバックグラウンドプロパティが他の宣言を上書きしますか？

CSS3は複数の背景で可能ですか？

Answer 1

このような背景画像をコンマで区切った場合： background-image: url(../images/misc/formLoader.gif), url(../images/misc/selectLoader.gif), url(../images/misc/projectLoader.gif); これはうまくいくはずです。私はそれが `背景： 'で動作するかどうかわかりません。ただ試してみてください。

Answer 2

複数の背景をcss3で1つの要素に配置できます。 http://www.css3.info/preview/multiple-backgrounds/

---

あなたはそれが同様にIEで仕事をしたい場合は..あなたのwannaはそれ<img>道ください。

---

また一つの良い方法は、単一の画像文書に複数の画像を入れて、要素を分離し、その1枚の特定の画像が配置される位置を定義するためにbackground-position: -20px 0px;を使用する背景画像としてそれを適用することです。これにより、このドキュメント内のこれらのイメージは、同じドキュメント内の同じ時刻にロードされます。

この方法では、<img>またはbackgroundのいずれかをロードして複数のイメージをロードするだけで済みます。

Answer 3

これはChromeとIEの両方で画像をプリロードし、ホバーにスワップするのに役立ちました。画像が背景に設定されているので、「プリロード」divには高さ/幅がありません。そのため、ページには表示されず、ホバーでスワップするときに画像が準備されます。 （。あなたは、明らかに私はちょうど全体のポイントを得るためにここに最小限のCSSを示していますアンカーの上に高さ/幅を設定する必要があります）

HTML：

<div id="preload"></div> 
<div id="icons"> 
    <a href="http://..." class="social-button-1"></a> 
    <a href="http://..." class="social-button-2"></a> 
    <a href="http://..." class="social-button-3"></a> 
</div> 

CSS：

#preload {background: url('images/pic1b.png'), url('images/pic2b.png'), url('images/pic3b.png');} 
.social-button-1 {background: url('images/pic1a.png');} 
.social-button-2 {background: url('images/pic2a.png');} 
.social-button-3 {background: url('images/pic3a.png');} 
.social-button-1:hover {background: url('images/pic1b.png');} 
.social-button-2:hover {background: url('images/pic2b.png');} 
.social-button-3:hover {background: url('images/pic3b.png');}