0

私はこのコードでdivを持っています

スタイル

#input{background:url(../image/main.png)}
#input:hover {background:url(../image/hover.png)}

html

<div id="input">input div </div>
<div id="input">input div 2</div>
<div id="input">input div 3</div>
<div id="input">input div 4</div>

ページの読み込み時に main.png の読み込みと表示が行われますが、マウスが div の最初の div 黒に移動し、2 秒または 3 秒後に hover.png が表示されます。私の背景の写真のサイズは大きくありませんが、最初に2つの写真をロードしてホバー写真をすばやく表示するには、ホストが非常に弱いのではないでしょうか?

4

1 に答える 1

5

そのためにスプライトを使用してから、背景を設定して、background-positionすべてが最初に読み込まれるようにすることができます。

また、スプライトの最も優れている点は、各画像にサーバーへの個別のリクエストが必要なため、実際に読み込み時間が短縮されることですが、ほとんどのWebサイトで単一のファイルのみをリクエストすると、読み込み時間を大幅に増やすことができます。

これはそれがどのように見えるかの良い例です：

ここに画像の説明を入力してください

そして、コードは次のようになります。

.mydiv:hover{
   background-position:-30px 0px;
}

スプライトがどのように機能するかの実例

background-positions実際にどのように機能するかについての詳細は、こちらをご覧ください： http ://www.w3schools.com/cssref/pr_background-position.asp

于 2012-11-20T14:21:20.643 に答える