1

私はCSSとWebプログラミングにまったく慣れていません。私がやろうとしているのは、ボタンにホバリング効果を追加することです。私は2つの画像を使用してこれを行っています。

ダウンロードと呼ばれるボタンがあり、ホバーコードに次を追加します。

.button:hover{
    background-image:url(images/button2.png);

}

問題は、ボタンの読み込みに時間がかかることです。つまり、ホバーするとボタンが表示されるまでに遅延が発生します。どうすればこれを解決できますか？

編集：プリロードを使用してみましたが、一種の遅延もあります

div#preloadedImages
{
    width: 0px;
    height: 0px;
        background-image: url(images/button2.png);

}
4

3 に答える 3

0

現在のcssやその他のものをそのままにして<img>、ページの任意の場所にコンポーネントを追加し、非表示にして最初に画像をロードします.

<img src="images/button2.png" style="display:none;"/>
于 2012-11-17T16:16:47.293 に答える
0

遅延を取り除くには、イメージ スプライトを使用する必要があります。スプライトは、複数の画像を含む 1 つの大きなファイルです。ボタンの背景は sprite.png ファイルに設定されます。background-positionその後、プロパティを変更してスプライトの位置を変更できます。

ところで、なぜボタンに画像を使用するのですか? ほとんどのボタンは、古いブラウザ用のいくつかのフォールバックを使用して、純粋な CSS で実行できます。

于 2012-11-17T03:47:04.123 に答える
0

2 つの画像から 1 つの画像を作成します (これをスプライトと呼びます)。

これがどのように機能するかを示すために、アニメーションを使用した実際の例も示します。

ここをクリック >>>フィドル

次に、背景の位置を に設定して、背景画像の通常の状態を表示します

 .button {
    width: 150px;
    height: 50px;
    background-image: url('image-sprite.jpg');
    background-position:  left top;
}

次に、ホバーCSSで、背景画像を移動してその下部を表示します

.button:hover {
    background-position: left bottom;
 }
于 2012-11-17T03:52:49.873 に答える