CSSスプライトとは

hzc
リリース: 2020-06-24 15:12:19
オリジナル
3926 人が閲覧しました

CSS スプライトは、中国では多くの人々に css スプライトと呼ばれています。これは、Web 画像アプリケーションの処理方法です。これにより、ページに含まれるすべての散発的な画像を 1 つの大きな画像に含めることができます。このページにアクセスすると、これまでのように読み込んだ画像が一枚ずつ表示されることはなくなります。

CSSスプライトとは

1. CSSSprites は中国では css スプライトと呼ばれることが多く、Web 画像アプリケーションの処理方法です。ページ内に散在するすべての画像を 1 つの大きな画像に含めることができるため、ページにアクセスしたときに、以前のように読み込まれた画像が 1 つずつ表示されることがなくなります。以下に概念図を示しましたので、ご参照ください。最終的には、何らかの手段で多数の小さな画像を 1 つの大きな画像に詰め込むことですが、この利点は、Web ページを読み込むときに一度読み込むだけで済むことです (前述の大きな画像)。

2. 方法: CSSの属性であるbackground-positionをCSSで使用します。これは、CSS ボックス内の背景画像の位置を調整することを意味します。

3. コード例: .d1{background-position:0px 0px;}

このコードつまり、ID 名 test1 の背景画像の位置は、座標原点の 0 の位置であり、デフォルトの位置です。

#d2{background-position:50px 50px;}

このコード これは、ID 名 test2 の背景画像の位置が原点 (デフォルトの位置) から上下左右 50 ピクセルであることを意味します。

4. コードや属性の説明については「cssマニュアル」を参照してください。

CSSスプライトとは

推奨チュートリアル: 「

HTML チュートリアル

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

関連ラベル:
css
ソース:php.cn
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
最新の問題
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート