ホームページ > 記事 > ウェブフロントエンド > CSS スプライトテクノロジはどのような用途に使用されますか?

CSS スプライトテクノロジはどのような用途に使用されますか?

青灯夜游オリジナル: 2020-11-09 16:10:133507ブラウズ

css スプライトテクノロジは、多数の小さな画像を 1 つの大きな画像に結合するため、ページが初めてロードされるときに、あまりにも多くの小さな画像をロードする必要はなく、小さな画像のみをロードして結合する必要があります。 . 表示される大きな画像を使用するだけで、ページの読み込み速度がある程度向上し、サーバーへの負荷が軽減され、サーバーのトラフィックが節約されます。

推奨チュートリアル: CSS ビデオチュートリアル

CSS スプライトテクノロジ (スプライト) とは何ですか?

css スプライトテクノロジ (スプライト) は、直訳すると「CSS スプライト」、「CSS 画像スプライト」、「CSS マップポジショニング」、または「CSS 画像スプライト」、「CSS スプライト」とも呼ばれます。 Web画像アプリケーションの処理方法です。

実際には、ページに含まれる散発的な画像をすべて 1 つの大きな画像に含めることであり、この方法では、ページにアクセスしたときに、読み込まれる画像が以前のように 1 つずつ読み込まれるのではなくなります。ゆっくりと地面が現れました。

スプライトテクノロジーの理由:

大きな Web ページの多くは、最初に読み込むときに多くの小さな画像を読み込む必要があり、同時にサーバーが混雑することを考慮します。この問題を解決するために、スプライトチャートテクノロジを使用して、ユーザーエクスペリエンスに影響を与える長いロード時間の問題を軽減します。

CSS スプライトテクノロジの役割

いわゆるスプライトは、多数の小さな画像を 1 つの大きな画像に結合するものです。 , 小さな画像をたくさん読み込む必要はなく、小さな画像を組み合わせた大きな画像、つまりスプライト画像のみを読み込むだけでよいため、ページの読み込み速度がある程度低下し、サーバーの負荷も軽減されます。ある程度の負荷や圧力がかかると

1. Web ページの画像を読み込む際のサーバーへのリクエストの数を削減します。

ほとんどの背景画像と小さなアイコンを結合して、どの場所でも簡単に使用できるようにすることで、異なる場所からのリクエストのみを送信できるようにします。これにより、サーバーへのリクエストの数が減り、サーバーの負荷が軽減され、ページの読み込み速度が向上し、サーバーのトラフィックが節約されます。

2. ページの読み込み速度の向上

スプライトテクノロジの利点の 1 つは、画像の読み込み時間 (スプライトが多数ある場合の 1 つの画像の読み込み時間) です。必要な画像で構成される GIF は、すべての画像を合わせたサイズよりも大幅に小さくなります。

単一の GIF には関連付けられたカラーテーブルが 1 つだけありますが、個別に分割されたそれぞれの GIF には独自のカラーテーブルがあるため、全体のサイズが大きくなります。したがって、単一の JPEG または PNG スプライトのサイズは、複数の画像に分割された画像の合計サイズよりも小さくなる可能性があります。

3. マウスロール時に白く点滅する現象を軽減します。 CSS Spriteを使用すると画像は1枚で済むのでこの現象は発生しません。

css スプライト技術の使い方

css スプライト (スプライト) は、実際には、CSS の背景と背景 -position 属性のレンダリングを使用して、複数の画像を 1 つの画像ファイルにマージするものです。これは、タグがより複雑になることを意味し、画像は CSS スプライトテクノロジはどのような用途に使用されますか? タグではなく CSS で定義されます。

画像を使用する必要がある場合、この段階では、background-repeat、background-positionなどと組み合わせたCSS属性background-imageによって画像が表示されます。

例:

CSS スプライトテクノロジはどのような用途に使用されますか? たとえば、これは大きなスプライトマップです。これを使用して、ANDY などの必要な文字をスペルアウトします

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        div{
            display: inline-block;
            background: url(images/abcd.jpg) no-repeat;
        }
        .aa{
            width: 108px;
            height: 110px;
            background-position: 0 -9px;
        }
        .nn{
            width: 112px;
            height: 110px;
            background-position: -255px -276px;
        }
        .dd{
            width: 97px;
            height: 107px;
            background-position: -363px -8px;
        }
        .yy{
            width: 110px;
            height: 110px;
            background-position: -367px -556px;
        }
    </style>
</head>
<body>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
</body>
</html>

最終効果:

CSS スプライトテクノロジはどのような用途に使用されますか? 実は、端的に言うと、スプライト画像を大きな背景として設定し、その背景画像を移動させます。必要な外観を表示する背景の位置。表示される部分。

スプライトチャートはサーバーの負荷とユーザーエクスペリエンスの問題を軽減しましたが、全身に影響を与えるという大きな欠点がまだあります。これらの写真の背景はすべて当社で細かく計測しているため、ページを変更する必要がある場合は非常に面倒な作業になります。。。

プログラミング関連の知識について詳しくは、

プログラミング入門

をご覧ください。！

以上がCSS スプライトテクノロジはどのような用途に使用されますか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

声明：

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

前の記事：ボックス選択効果を実現する純粋な CSS次の記事：ボックス選択効果を実現する純粋な CSS

続きを見る

CSS スプライト テクノロジはどのような用途に使用されますか?

関連記事

CSS スプライトテクノロジはどのような用途に使用されますか?