CSSイメージ光源

2909 ワード
CSS テキストリンク

1.画像Spriteとは？


  • 背景画像を適用する場合、各要素の背景画像を離散化する必要はなく、類似の性質を有する画像を1つのファイルに作成し、background-positionを用いて背景画像を配置する.

  • 主に固定用画像

  • これもゲーム開発の2 Dグラフィックスの過程で伝統的によく使われる方式である.

    • 1.1使用理由


  • 画像豊かなWebページでは、クライアントのGETリクエストを複数のサーバにロードおよび生成するのに時間がかかる場合があります.

  • 画像ストリームを使用すると、サーバリクエストの数を削減し、帯域幅を節約できます.

  • つまり、HTTPリクエストの回数を減らすことができる.

    • 2.柚子の皮

  • Daumでは、次の画像が使用されます.
  • Naverの場合、ドメイン画面では次の画像が使用されます.

    • 3.使用方法


  • まず、グラフィックエディタを使用して、画像ファイル内の特定の要素の位置とサイズを決定します.

  • HTML文書本文のスプレッドシート画像を表示する<div>要素が階層化されます.
    • <div id="container">
   <div class="sprite"></div>
</div>
  • CSSのbackground-imageおよびbackground-positionを使用して、splight画像を構成することができる.
    • width:52px;
height:52px;
background-image : url("spr_naver_01.png");
background-position: -136px -66px;
    • 欲しい画像しか出力できません.
    [9]
    Typescript and Classes