ホームページ >ウェブフロントエンド >htmlチュートリアル >css sprites_html/css_WEB-ITnose
css sprites_html/css_WEB-ITnose
- WBOYオリジナル
- 2016-06-24 11:25:46968ブラウズ
CSS スプライトとは何ですか?
簡単に言うと、合意されたルールに従って、Web ページ内の多数の小さな画像を 1 つの大きな画像に描画し、背景の背景位置を使用して必要な画像を描画することです。
おそらくあなたは尋ねるでしょう、なぜこれをするのですか？
実際、これは http リクエストを削減し、Web サイトのパフォーマンスを向上させることを意味します。実際、各画像はサーバーからダウンロードされるため、多数の画像を同時にダウンロードすると、それに対応する数の http リクエストが発行されます。ただし、ブラウザーによっては画像の数に制限があります。通常は 1 ～ 10 の範囲でダウンロードできるため、Web サイトに多くの写真がある場合、インターネット速度がどんなに速くても、必然的に Web サイトのパフォーマンスに影響します。これが CSS スプライト技術が必要な理由です。
それでは、一緒にデモを書いて例を挙げてみましょう。
下の図に示すように、コントロール ボタンを実装したい場合:
マウスが図内の各コントローラー ボタンに移動すると、イベントがトリガーされ、赤い領域に変わります。が表示され、各ボタンは独立して機能し、各領域を小さな画像に設定できます。
しかし、バックエンドを何回リクエストする必要がありますか? ！ ！
Web サイトのパフォーマンスを最適化する方法の 1 つは、http リクエストを減らすことです。
ここでは、http リクエストを減らすために画像を結合する必要があるため、CSS スプライトを使用します。
まず、特定のルールに従って、必要なすべての小さな画像を 1 つの大きな画像に結合して、必要な画像を作成します。
下の図は、各ボタン上にマウスを移動させていない状態を示しています:
下の図は、マウスを各ボタン上に移動した状態を示しています:
次に、各ボタン領域のサイズを設定します。上の図 1 に示すように、幅は 31 ピクセル、高さは 29 ピクセルで、背景画像は通常の状況における画像として定義されます。
なぜ幅が 31 で高さが 29 なのかと疑問に思うかもしれません。
それぞれの小さな絵、つまりそれぞれのボタンの幅と高さが非常に大きいためです。
次に、background-position 属性を使用して、必要な画像の部分をスナップダウンします。必要に応じて、background-position を 0 0 に設定します。これで問題ありません。
最後に、マウスが対応するボタンに移動すると、背景が明るい赤色の状態パターンに変わり、背景位置を使用して必要な小さい画像がダウンロードされます。
実装後の詳細なコードは以下を参照してください
<!DOCTYPE html> <head> <title>js_test</title> <style type="text/css"> .ptz { width:31px; height:29px; margin-right:1px; margin-bottom:6px; cursor:pointer; float:left; background:url(ptz.gif) no-repeat; } .tmain, .mmain, .bmain { clear:left; } .tl { background-position:0 0; } .tm { background-position:-34px 0; } .tr { background-position:-68px 0; } .add { background-position:-102px 0; } .search { background-position:-136px 0; } .subtract { background-position:-170px 0; } .ml { background-position:0 -32px; } .mm { background-position:-34px -32px; } .mr { background-position:-68px -32px; } .focus { background-position:-136px -32px; } .bl { background-position:0 -64px; } .bm { background-position:-34px -64px; } .br { background-position:-68px -64px; } .iris { background-position:-136px -64px; } .slide { width:192px; height:18px; clear:left; background-position:0 -96px; } .slideBtt { width:14px; height:16px; margin-left:22px; background-position:0 -121px; } .indicate { clear:left; width:189px; height:29px; border:1px solid #C1C0C0; border-radius:3px; } .outterBtt { float:left; border-right:1px solid #C1C0C0; width:37px; height:100%; } .lastOut { border:0; } .btt1 { width:14px; height:14px; margin:8px 0 0 12px; background-position:-28px -127px; } .btt2 { width:20px; height:20px; background-position:-57px -127px; margin:7px 0 0 11px; } .btt3 { width:12px; height:16px; background-position:-90px -128px; margin:8px 0 0 10px; } .btt4 { width:20px; height:18px; background-position:-118px -128px; margin:9px 0 0 9px; } .btt5 { width:15px; height:15px; background-position:-152px -128px; margin:8px 0 0 12px; } .tmain div:hover, .mmain div:hover, .bmain div:hover, .outterBtt div:hover { background-image:url(ptzon.gif); } </style> </head> <body> <div class="tmain"> <div class="ptz tl"></div> <div class="ptz tm"></div> <div class="ptz tr"></div> <div class="ptz add"></div> <div class="ptz search"></div> <div class="ptz subtract"></div> </div> <div class="mmain"> <div class="ptz ml"></div> <div class="ptz mm"></div> <div class="ptz mr"></div> <div class="ptz add"></div> <div class="ptz focus"></div> <div class="ptz subtract"></div> </div> <div class="bmain"> <div class="ptz bl"></div> <div class="ptz bm"></div> <div class="ptz br"></div> <div class="ptz add"></div> <div class="ptz iris"></div> <div class="ptz subtract"></div> </div> <div class="ptz slide"> <div class="ptz slideBtt"></div> </div> <div class="indicate"> <div class="outterBtt"> <div class="ptz btt1"></div> </div> <div class="outterBtt"> <div class="ptz btt2"></div> </div> <div class="outterBtt"> <div class="ptz btt3"></div> </div> <div class="outterBtt"> <div class="ptz btt4"></div> </div> <div class="outterBtt lastOut"> <div class="ptz btt5"></div> </div> </div> </body></html>