3

単純な画像を使用するよりもcssスプライトの方が優れていることをどこかで読みました。どうですか？また、私はHtmlを初めて使用するので、cssがどのように機能するかを教えてもらえますか？また、cssスプライトの簡単な例を教えてください。

4

3 に答える 3

6

これが完全なコードです。コピーしてメモ帳に貼り付け、として保存しabc.htmlます。以下の2つの画像を次のように同じフォルダに保存します： image.gif大きい画像とtrans.gif小さい画像。

<html>
<head>
    <title>Image Sprites</title>
    <style type="text/css">
        img.sprite
        {
            width:46px;
            height:44px;
            background:url(image.gif) 0px 0px;
        }        

        .sprite:hover
        {
            background: url(image.gif) 0px 44px;
        }
     </style>
</head>

<body>
    <img class="sprite" src="trans.gif" />
</body>
</html>

簡単に言うと、CSSスプライトは多数ではなく1つの画像のみを使用します。したがって、サーバーからの多くの画像リクエストの代わりに、単一のリクエストのみが送信されます。

于 2012-09-11T15:33:59.327 に答える
5

複数の画像に対して画像を取得するためのサーバーへの1回の旅行。私は それらを構築するためのSpritePad（オンラインアプリ）を見つけました、それはまた関連するボイラープレートcssを生成します（あなたが始めているならそれは少し厄介かもしれません）。

于 2012-09-11T15:34:32.310 に答える
1

基本的には、1つの画像を読み込んで、ページ周辺のさまざまな要素でその画像を使用できます。ロード要求が少なくなり、ロード時間が短くなる可能性があります。

次に例を示します： http ：//www.thedotproduct.org/experiments/css-sprites/

使用されているスプライト画像は次のとおりです： http ：//www.thedotproduct.org/experiments/css-sprites/css-sprites-menu.jpg

于 2012-09-11T15:32:19.533 に答える