CSSでスプライトを使用する方法-CSSチュートリアル-php.cn

ホームページ

ウェブフロントエンド

CSSチュートリアル

CSSでスプライトを使用する方法

醉折花枝作酒筹

Apr 07, 2021 pm 06:06 PM

cssスプライト

CSS でスプライトマップを使用する方法: 最初に、background-image 属性を使用してスプライトマップをインポートし、次に、background-repeat:no-repeat を使用して画像が繰り返されないように設定し、最後に、background-画像の初期位置を正確な位置に設定するには、position 属性を使用します。

CSSでスプライトを使用する方法

このチュートリアルの動作環境: Windows7 システム、CSS3&&HTML5 バージョン、Dell G3 コンピューター。

CSS スプライトとは何ですか?

CSS Spriteとは直訳すると「CSSスプライト」で、「CSS画像ステッチング」や「CSSテクスチャポジショニング」とも呼ばれる、Web画像アプリケーションの処理方法です。実際には、複数の小さな画像を 1 つの画像に統合し、CSS "background-image"、"background-repeat"、"background-position" を使用します。 " を使用して背景の配置を実行すると、background-position は数値を使用して背景画像をレイアウトボックスオブジェクトの位置に正確に配置できます。

利点:

Web ページの http リクエストを減らし、ページの読み込みを高速化し、ページのパフォーマンスを向上させます (小さな画像に適しています)。
たとえば、ページ内で多数のアイコン画像が使用されている場合、ページがそれらの画像を 1 つずつリクエストすると、大量の http リクエストが発生することになります。このとき、これらの画像を 1 つに結合すると、ページはロードする必要があるのは 1 回だけです。これにより、http リクエストによるパフォーマンスの消費が軽減されます。以下に示すように:

画像の統合原理:

画像を切り取り、同時に統合します。
配置するときに下、右などを使用することは避けてください。スプライトの幅または高さを拡大するときに位置エラーを避けるには、特定の値を使用してください。
小さなアイコン用に十分なスペースを確保してください。通常、これらのアイコン要素を使用すると多くのコンテンツが含まれ、広いスペースが必要になる可能性があるため、この領域内の他の画像が誤って表示される可能性があります。通常の状況では、これらの小さなアイコンはファイルの右端に統合されます。
#統合スプライト画像は 1 つにつき 100KB 以内にしてください。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>sprite精灵图使用</title>
    <style type="text/css">
        ol, ul ,li{list-style:none};
        body, p,  ul, li {margin:0; padding:0;}
        ul li {
            float: left;
            background-color: #63caac;
            color: #fff;
            padding: 5px 10px;
            margin-right: 10px;
        }
        li:hover{background-color:#347764;}
        ul.sprite li span{display: block;}
        ul.sprite li span.l1{background-position:0 0;}
        ul.sprite li span.l2{background-position:-64px 0;}
        ul.sprite li span.l3{background-position:-128px 0;}
        ul.sprite li span.l4{background-position:-192px 0;}
ul.sprite li span{width:64px;padding-top:5px;height:64px;overflow:hidden;background:url(img.png) no-repeat;}
    </style>
</head>
<body>
    <ul class="sprite">
        <li><span class="l1"></span></li>
        <li><span class="l2"></span></li>
        <li><span class="l3"></span></li>
        <li><span class="l4"></span></li>
    </ul>
</body>
</html>

推奨学習: 「

css ビデオチュートリアル

」

以上がCSSでスプライトを使用する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

声明

この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。