ホームプログラミング言語 Web関連 css3 CSS スプライトマップ (スプライト)

CSS スプライトマップ (スプライト)

ユーザーが Web サイトにアクセスすると、ブラウザーは一連の要求をサーバーに送信します。たとえば、Web ページ上の各画像は、最終的にユーザーに表示される前に 1 つの要求を通過する必要があります。ただし、Web ページには多くの画像リソース (ページに表示される画像、Web ページの背景画像、一部の装飾画像など) が含まれていることが多く、そのためブラウザーは頻繁にサーバーに要求し、ウェブページの読み込み速度。サーバーへのリクエスト数を効果的に減らし、ページの読み込み速度を上げるために、スプライト技術とも呼ばれるCSSスプライト技術が登場しました。

簡単に言えば、スプライト技術は、Web ページの背景画像を処理する方法であり、ページに含まれる小さな背景画像のすべてまたは一部を組み合わせて大きな画像にし、この画像を種類に適用する必要があります。ウェブページの。通常、背景画像の小さな断片化された画像を大きな画像に結合するだけです。この大きな画像は、次の図に示すように、スプライト画像 (スプライト画像とも呼ばれます) と呼ばれます。 :

スプライトマップの使用も非常に簡単です。background または background-position 属性を使用して背景画像の位置を特定するだけです。スプライトの使用方法を示す例として、上の図に示されているスプライトを取り上げます。

 <!DOCTYPE html>
<html>
<head>
    <style>
        ul li {
            float: left;
            width: 30px;
            height: 30px;
            list-style: none;
            margin: 5px;
            border: 1px solid #CCC;
            border-radius: 6px;
        }
        ul li:nth-child(1){
            background: url(./sprite.png) no-repeat 4px 1px;
        }
        ul li:nth-child(2){
            background: url(./sprite.png) no-repeat -38px 1px;
        }
        ul li:nth-child(3){
            background: url(./sprite.png) no-repeat -81px 3px;
        }
        ul li:nth-child(4){
            background: url(./sprite.png) no-repeat -123px 2px;
        }
        ul li:nth-child(5){
            background: url(./sprite.png) no-repeat -171px 0px;
        }
        ul li:nth-child(6){
            background: url(./sprite.png) no-repeat -214px 2px;
        }
        ul li:nth-child(7){
            background: url(./sprite.png) no-repeat -267px 1px;
        }
        ul li:nth-child(8){
            background: url(./sprite.png) no-repeat 2px -36px;
        }
    </style>
</head>
<body>
    <ul>
        <li></li><li></li>
        <li></li><li></li>
        <li></li><li></li>
        <li></li><li></li>
    </ul>
</body>
</html>

操作の結果は次のとおりです。

簡単に言えば、スプライト画像は大きな背景画像です。background-position を使用して背景画像を移動するだけで、背景画像の一部のみが表示されます。これまでのところ、スプライトマップの開発は非常に成熟しています. スプライトマップの影は、Alibaba、Yahoo、Google、JD.com、および Taobao などの大規模な Web サイトで見ることができます. スプライトマップを使用すると、画像のサイズを大幅に縮小できます。サーバーの負荷を減らす. ウェブページの読み込み速度を上げるリクエストの数.もちろん、スプライトの使用に次のような欠点がないわけではありません。

画像を結合する場合、複数の画像を整然と合理的な方法で 1 つの画像に結合する必要があり、各小さな画像の間に十分なスペースを確保する必要があります。
ワイドスクリーンまたは高解像度の画面でページ幅に合わせる場合、画像の幅が十分でない場合、背景が壊れます。
スプライトマップのメンテナンスが面倒で、ページの背景がわずかに変更されると、スプライトマップ全体を変更する必要があります。

「 CSS スプライトマップ (スプライト)」についてわかりやすく解説！絶対に観るべきベスト2動画

[Learn Fireworks CS6] 05 CSSスプライト

https://www.youtube-nocookie.com/watch?v=7hji3fe14Uo&pp=ygU2IENTUyDjgrnjg5fjg6njgqTjg4gg44Oe44OD44OXICjjgrnjg5fjg6njgqTjg4gpJmhsPUpB

[Learn Fireworks CS6] 05 CSSスプライト (https://www.youtube-nocookie.com/watch?v=7hji3fe14Uo&pp=ygU2IENTUyDjgrnjg5fjg6njgqTjg4gg44Oe44OD44OXICjjgrnjg5fjg6njgqTjg4gpJmhsPUpB)

Dreamweaver Town Meeting in Tokyo 大喜利 CSS Sprite Extension

https://www.youtube-nocookie.com/watch?v=ZICgQlhAgMo&pp=ygU2IENTUyDjgrnjg5fjg6njgqTjg4gg44Oe44OD44OXICjjgrnjg5fjg6njgqTjg4gpJmhsPUpB

Dreamweaver Town Meeting in Tokyo 大喜利 CSS Sprite Extension (https://www.youtube-nocookie.com/watch?v=ZICgQlhAgMo&pp=ygU2IENTUyDjgrnjg5fjg6njgqTjg4gg44Oe44OD44OXICjjgrnjg5fjg6njgqTjg4gpJmhsPUpB)

css3