検索

css スプライトは文字通り CSS スプライトと訳されます。通常は「CSS 画像のステッチ」または「CSS テクスチャの配置」として解釈されます。この記事では、CSS スプライトの使い方と基本的な使用例を紹介します。必要なプログラマーは参考にしてください。

1. CSS スプライトとは

css スプライトは、直訳すると CSS スプライト となります。通常、「CSS 画像ステッチング」または「CSS テクスチャ配置」として解釈されます。実際には、複数の画像を 1 つの画像に統合し、CSS 背景配置テクノロジによって Web ページの背景をレイアウトします。これを行うことの利点も明らかです。画像が多いと http リクエストが増加するため、特に CSSSPrite を使用して画像の数を減らすことができれば、間違いなく Web サイトのパフォーマンスが低下します。画像の速度が向上します。

CSS スプライトとは何ですか? 一般的な説明: CSS スプライトは、実際には Web ページ上のいくつかの背景画像を 1 つの画像に統合し、CSS "background-image"、"background-repeat"、"background-" を使用します。 「position」の組み合わせにより、背景の配置を実行します。background-position では、数値を使用して、レイアウト ボックス オブジェクト内に背景画像を正確に配置できます。

2. 適切な CSS スプライト レイアウトと不適切な CSS スプライト レイアウト

1. 適したもの: 一般的な小さなアイコン素材

小さなアイコン ico 素材、一般的なアイコンは非常に小さく、幅と高さが 10 ピクセル以上、数十ピクセルです。スプライトの背景の位置とレイアウトを実現するために、これを 1 つの画像に結合します。小さな ico が多すぎると、Web ページをロードするときに当然ながら一部の http IIS リンクが消費されますが、それらはロード後すぐに解放されます。

2. 適さないもの: 大きな写真と大きな背景

大きな背景は通常、Web ページの背景に使用されます。結合すると、Web ページの背景として設定されたときにすべての背景が表示されます。大きな画像を結合したり結合したりすると、画像のサイズが大きくなります。訪問者がネットワーク帯域幅にアクセスできない場合、背景画像を含む大きなファイルの読み込みが若干遅くなります。そのため、大きな画像に対して CSS スプライトの背景配置レイアウトを使用することはお勧めできません。

3. 適したスプライトのおすすめまとめ

一般に、このスプライト結合レイアウトはローカルな小さなボックス レイアウトに使用され、大きな背景や大きなレイアウトの背景には適していません。たとえば、小さな部分レイアウト、小さなアイコンの背景、小さなナビゲーションの背景、その他の CSS レイアウトなどです。

3. CSS スプライトの判断と選択の長所と短所

1. スプライトの利点:

いくつかの小さなアイコンが 1 つの画像に結合されて配置され、http IIS リクエストの数が減少します。これは隠れた利点です。トラフィックの多い Web サイトの場合 明らかに、これにより Web サイトのパフォーマンスが暗黙的に向上します。トラフィックの多い Web サイトでは、HTTP リクエストの数は比較的貴重です。これが CSS スプライトの最大の利点であり、HTTP リクエストの数が減少する主な理由でもあります。画像ファイルの数。

2. スプライトの欠点

画像を結合するときは、複数の画像を順序正しく 1 つの画像に結合し、セクションに不要な背景が表示されないように十分なスペースを残す必要があります。または、継ぎ合わせの位置が不適切な場合、レイアウト中にボックスオブジェクトを配置するときに、隣接する写真が簡単にマージされ、写真が干渉しやすくなります。

CSS スプライトは開発中にさらに面倒で、Photoshop (PS) などを使用する必要があります。各背景ユニットの正確な位置を測定して計算するためのツールです。これは難しいことではありませんが、非常に面倒です。変更するには、通常、結合された画像を変更する必要があります。元の場所に配置できない場合は、変更する必要のない部分は変更しないことが最善です。 (できれば)以下の画像を追加します。画像のバイト数が増加します。画像が変更されるたびに、画像のコンテンツを削除または追加する必要があり、少し面倒で、画像の位置を再計算する必要があるためです(特にこのような数千ピクセルの画像)も非常に面倒です

画像の位置をある絶対値に固定する必要があるため、中心などの自由度が失われます。

3. 推奨事項の概要

画像の貼り合わせには一定の経験とスキルが必要であり (練習すればすぐに習得できます)、位置決めの値の測定や変更がそれほど柔軟ではないため、小規模な Web サイトやトラフィックの少ない場合にはあまりお勧めできません。 Web サイトや一般的な企業 Web サイトでは、CSS スプライトを使用します。CSS スプライトを使用すると、通常の単一の背景画像レイアウトよりも多くの時間とエネルギーを消費するため、小規模なサイトには推奨されません。ただし、柔軟なレイアウトを習得するには、このレイアウト スキルも習得する必要があります。多数の HTTP リクエストが存在する小規模なサイトをスプライシングしても何のメリットもありませんが、貴重な時間を無駄にします。逆に、大規模な Web サイトやトラフィックの多い Web サイトには、より価値のあるものをお勧めします。

4. CSS スプライトのサンプル チュートリアル

1. 実現するマテリアルとエフェクトのスクリーンショット

2. スプライトのサンプル チュートリアルの説明と紹介

まず、これらのアイコン素材を同じ絵(PSステッチ)上に配置し、リストごとに異なるアイコンを配置したリスト型レイアウトに実装します。このレイアウトを実装するには CSS スプライトを使用します (実際には背景スタイルを使用します)。

まず、このリスト レイアウトには ul li リスト レイアウトを使用します。これは、周囲のコンテンツと境界線の間に一定の間隔を空けるために、ul にパディングを設定するためです。各 li の前にある画像は異なりますが、背景画像は画像上で 1 つに結合されます。そこで、この異なるアイコン効果を実現するために、ここで li の spam タグを使用して、各アイコンを区別します。スパンに異なるクラスを設定し、異なるクラスに応じて対応するアイコンを設定および配置します。

3. チュートリアルの準備例

1) 初期化テンプレートの使用: 主要なブラウザと互換性を持たせるために、ここでは引き続き Web サイトを使用して初期化テンプレートを提供し、このテンプレートに基づいて設定を変更します。この例のスタイル。
2) アイコン素材。ここでは、以下に示すように、「ico.png」という名前の結合されたアイコン素材画像を直接提供します。直接保存して使用できます。

4. まずエフェクトをレイアウトし、CSS スプライトで異なる背景アイコン スタイルを設定します

html コード:

<ul class="Sprites">     <li><span class="a1"></span><a href="#">WORD文章标题</a></li>     <li><span class="a2"></span><a href="#">PPT内容标题</a></li>     <li><span class="a3"></span><a href="#">Excel内容标题</a></li>     <li><span class="a4"></span><a href="#">PDF内容标题</a></li>     <li><span class="a5"></span><a href="#">文本文档标题</a></li> </ul> 

異なるエフェクトを区別するために、異なるクラスをスパンに追加します。

CSS コード:

ul.Sprites{ margin:0 auto; border:1px solid #F00; width:300px; padding:10px;} ul.Sprites li{ height:24px; font-size:14px;line-height:24px; text-align:left; overflow:hidden} ul.Sprites li span{ float:left; width:17px;padding-top:5px;height:17px;  overflow:hidden;background:url(ico.png) no-repeat} ul.Sprites li a{ padding-left:5px} 

エフェクトのスクリーンショット

CSS スプライト キー コードと説明

まず ul.Sprites li spa の背景を紹介します
ul.Sprites li spa{background:url(ico.png) no -repeat} は、span の CSS 背景画像を設定します。
次に、異なるスパンクラスのアイコンの背景位置の特定の値をそれぞれ設定します
ul.Sprites li span.a1{background-position: -62px -32px} 背景画像を対応するボックスオブジェクトの背景として設定し、「ドラッグ」 " 左に 62px、上に 32px ドラッグしてこの背景アイコンの表示を開始します
ul.Sprites li span.a2{background-position: -86px -32px} 背景画像を対応するボックス オブジェクトの背景として設定し、" 86px 左にドラッグし、上に 32px ドラッグすると、この背景アイコンの表示が開始されます
ul.Sprites li span.a3{background-position: -110px -32px} 背景画像を対応するボックス オブジェクトの背景として設定し、この背景アイコンの表示を開始するには、左に 110 ピクセル、上に 32 ピクセル「ドラッグ」します。
ul.Sprites li span.a4{background-position: -133px -32px} 背景画像を、対応するボックス オブジェクトの背景として設定しますそして、左に 133 ピクセル、上に 32 ピクセル「ドラッグ」して、この背景アイコンの表示を開始します
ul .Sprites li span.a5{background-position: -158px -32px} 背景画像を対応するボックス オブジェクトの背景として設定した後、この背景アイコンの表示を開始するには、左に 158 ピクセル、上に 32 ピクセル「ドラッグ」します

キー: 背景の背景位置には 2 つの値があります。最初の値は、左への距離の値を表します (正または負の値を指定できます)。 2 番目の値は、上部までの距離の値を表します (正または負の値を指定できます)。値は正または負の値になります。オブジェクトボックスの背景画像 背景画像を左に移動して距離を考慮すると、背景画像が表示され始めます。これが負の数の場合、背景画像をボックスの背景画像として表します。オブジェクト。背景画像がボックス オブジェクトの左側を超えてどのくらいドラッグされるか、および背景画像の表示が開始されるまでボックス オブジェクトの上部を超えてどのくらいドラッグされるか。

CSS スプライト技術の技術概要

CSS スプライトは、実際には CSS 背景スタイルを拡張したもので、以前は、background-position は通常、正の値に設定され、背景の左から上までのピクセル数が設定されていました。画像の表示を開始する背景がマイナスでした。値を設定した後、画像の表示を開始するには画像を左上から何ピクセル離す必要があります。この場合を観察して値を複数回変更してください。パターンを作成する場合は、すぐにこのテクニックを使用して、距離値を取得するための PS スライス ツールを学習します。

声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
HTML、CSS、およびJavaScriptの理解:初心者向けガイドHTML、CSS、およびJavaScriptの理解:初心者向けガイドApr 12, 2025 am 12:02 AM

webdevelopmentReliesOnhtml、css、andjavascript:1)htmlStructuresContent、2)cssStylesit、および3)Javascriptaddsinteractivity、形成、

HTMLの役割:Webコンテンツの構造HTMLの役割:Webコンテンツの構造Apr 11, 2025 am 12:12 AM

HTMLの役割は、タグと属性を使用してWebページの構造とコンテンツを定義することです。 1。HTMLは、読みやすく理解しやすいようなタグを介してコンテンツを整理します。 2。アクセシビリティとSEOを強化するには、セマンティックタグなどを使用します。 3. HTMLコードの最適化により、Webページの読み込み速度とユーザーエクスペリエンスが向上する可能性があります。

HTMLとコード:用語を詳しく見るHTMLとコード:用語を詳しく見るApr 10, 2025 am 09:28 AM

htmlisaspecifictypeofcodefocuseduructuringwebcontent

HTML、CSS、およびJavaScript:Web開発者に不可欠なツールHTML、CSS、およびJavaScript:Web開発者に不可欠なツールApr 09, 2025 am 12:12 AM

HTML、CSS、およびJavaScriptは、Web開発の3つの柱です。 1。HTMLは、Webページ構造を定義し、などなどのタグを使用します。2。CSSは、色、フォントサイズなどのセレクターと属性を使用してWebページスタイルを制御します。

HTML、CSS、およびJavaScriptの役割:コアの責任HTML、CSS、およびJavaScriptの役割:コアの責任Apr 08, 2025 pm 07:05 PM

HTMLはWeb構造を定義し、CSSはスタイルとレイアウトを担当し、JavaScriptは動的な相互作用を提供します。 3人はWeb開発で職務を遂行し、共同でカラフルなWebサイトを構築します。

HTMLは初心者のために簡単に学ぶことができますか?HTMLは初心者のために簡単に学ぶことができますか?Apr 07, 2025 am 12:11 AM

HTMLは、簡単に学習しやすく、結果をすばやく見ることができるため、初心者に適しています。 1)HTMLの学習曲線はスムーズで簡単に開始できます。 2)基本タグをマスターして、Webページの作成を開始します。 3)柔軟性が高く、CSSおよびJavaScriptと組み合わせて使用​​できます。 4)豊富な学習リソースと最新のツールは、学習プロセスをサポートしています。

HTMLでの開始タグの例は何ですか?HTMLでの開始タグの例は何ですか?Apr 06, 2025 am 12:04 AM

Anexampleapalofastartingtaginhtmlis、それはaperginsaparagraph.startingtagsaresentionentientiontheyinitiateelements、definetheirtypes、およびarecrucialforurturingwebpagesandcontingthomedomを構築します。

CSSのフレックスボックスレイアウトを使用して、メニューの点線のラインセグメンテーション効果のセンターアラインメントを実現する方法は?CSSのフレックスボックスレイアウトを使用して、メニューの点線のラインセグメンテーション効果のセンターアラインメントを実現する方法は?Apr 05, 2025 pm 01:24 PM

メニューで点線のラインセグメンテーション効果を設計する方法は?メニューを設計するときは、通常、皿の名前と価格の間に左右に合わせることは難しくありませんが、真ん中の点線またはポイントはどうですか...

See all articles

ホットAIツール

Undresser.AI Undress

Undresser.AI Undress

リアルなヌード写真を作成する AI 搭載アプリ

AI Clothes Remover

AI Clothes Remover

写真から衣服を削除するオンライン AI ツール。

Undress AI Tool

Undress AI Tool

脱衣画像を無料で

Clothoff.io

Clothoff.io

AI衣類リムーバー

AI Hentai Generator

AI Hentai Generator

AIヘンタイを無料で生成します。

ホットツール

AtomエディタMac版ダウンロード

AtomエディタMac版ダウンロード

最も人気のあるオープンソースエディター

SecLists

SecLists

SecLists は、セキュリティ テスターの究極の相棒です。これは、セキュリティ評価中に頻繁に使用されるさまざまな種類のリストを 1 か所にまとめたものです。 SecLists は、セキュリティ テスターが必要とする可能性のあるすべてのリストを便利に提供することで、セキュリティ テストをより効率的かつ生産的にするのに役立ちます。リストの種類には、ユーザー名、パスワード、URL、ファジング ペイロード、機密データ パターン、Web シェルなどが含まれます。テスターはこのリポジトリを新しいテスト マシンにプルするだけで、必要なあらゆる種類のリストにアクセスできるようになります。

DVWA

DVWA

Damn Vulnerable Web App (DVWA) は、非常に脆弱な PHP/MySQL Web アプリケーションです。その主な目的は、セキュリティ専門家が法的環境でスキルとツールをテストするのに役立ち、Web 開発者が Web アプリケーションを保護するプロセスをより深く理解できるようにし、教師/生徒が教室環境で Web アプリケーションを教え/学習できるようにすることです。安全。 DVWA の目標は、シンプルでわかりやすいインターフェイスを通じて、さまざまな難易度で最も一般的な Web 脆弱性のいくつかを実践することです。このソフトウェアは、

SublimeText3 Linux 新バージョン

SublimeText3 Linux 新バージョン

SublimeText3 Linux 最新バージョン

EditPlus 中国語クラック版

EditPlus 中国語クラック版

サイズが小さく、構文の強調表示、コード プロンプト機能はサポートされていません