CSSスプライトとは何ですか-フロントエンドQ&A-php.cn

ホームページ

ウェブフロントエンド

フロントエンドQ&A

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

青灯夜游

May 12, 2021 pm 04:44 PM

css スプライトは、Web ページの背景画像を処理する方法です。実際には、ページに含まれる散在するすべての画像が 1 つの大きな画像に含まれ、その大きな画像が Web ページに適用されます。このようにして、ユーザーがページにアクセスしたときに、サービスにリクエストを送信するだけで済みます。背景画像を全面表示できます。

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

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

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

「CSS スプライト」は、通常「CSS 画像ステッチング」、「CSS マップ配置」、または「CSS 画像スプライト」、「CSS スプライト」とも解釈され、Web 画像です。アプリケーションの処理方法。実際には、ページ内に散在するすべての画像を 1 つの大きな画像に含めることにより、ページにアクセスしたときに、読み込まれた画像が以前のように 1 枚ずつゆっくり表示されることがなくなります。

ユーザーがページにアクセスすると、サービスにリクエストを送信するだけで、Web ページ内のすべての背景画像を表示できます。

例:

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

利点

CSS スプライトを使用すると、Web ページの http リクエストを効果的に削減できます。したがって、ページのパフォーマンスが大幅に向上します。これは CSS スプライトの最大の利点でもあり、CSS スプライトが広く普及し適用される主な理由です。
CSS スプライトは画像のバイト数を削減できます。 3 枚の画像を 1 枚の画像に結合するバイト数は、これら 3 枚の画像のバイト数の合計よりも常に小さくなります。
Web デザイナーが写真に名前を付ける問題を解決します。写真の集合に名前を付けるだけで済みます。小さな要素に名前を付ける必要がなくなり、Web ページの効率が向上します。生産。
スタイルの変更は簡単です。1 つまたはいくつかの画像の色やスタイルを変更するだけで、Web ページ全体のスタイルを変更できます。メンテナンスがより便利になります。

スプライト技術の使用

cssスプライト(スプライト)とは、実際には複数の画像を1つに結合するものです。、Web ページの背景は、CSS 背景配置テクノロジによってレイアウトされます。画像を使用する必要がある場合、現在の段階では、CSS 属性のbackground-imageをbackground-repeat、background-positionなどと組み合わせて使用して画像を表示します。

#例:

スプライト解析:

CSSスプライトとは何ですか ##コード:

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title></title>
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <style>
        *{
            margin: 0;
            padding: 0;
        }
        .sprites{
            width: 200px;
            margin: 50px auto;
        }
        .sprites div{
            margin: 5px;
        }
        .sprites span{
            float: left;
            width: 20px; 
            height:20px;
            background: url(&#39;./images/icon.png&#39;);/* 引用精灵图 */
            background-size: 60px 40px;
        }
        .sprites1{
            background-position: 0 0;
        }
        .sprites2{
            background-position: -20px 0 !important;
        }
        .sprites3{
            background-position: 0 -20px !important;
        }
        .sprites4{
            background-position: -20px -20px !important;
        }
        .sprites5{
            background-position: -40px 0 !important;
        }
    </style>

</head>
<body>
    <div class="sprites">
        <div><span class="sprites1"></span>付款图标</div>
        <div><span class="sprites2"></span>存款图标</div>
        <div><span class="sprites3"></span>删除图标</div>
        <div><span class="sprites4"></span>粘贴图标</div>
        <div><span class="sprites5"></span>笑脸图标</div>
    </div>
</body>
</html>

ログイン後にコピー

CSSスプライトとは何ですか学習ビデオ共有: