DIV+CSS背景全体図（CSSスプライト）

これまでに多くの大きな Web サイトを見てきましたが、その Web サイト全体の背景画像が同じ画像であったのですが、その背景画像に小さなアイコンがたくさん表示されていました。

現在、中国の多くのウェブサイトでも使用されている、海外で非常に人気のあるCSSスプライトでもあります。

今回CSS+DIVを書く際もこの方法でWebサイト全体を書いてみたところ、Webサイト全体は遅いものの、Webサイトのリソースはかなり節約できていると感じました。

原則として、一般的なウェブサイト上の画像は分離されており、各画像呼び出しは IIS リンクを占有しますが、すべての画像が 1 つの画像上に配置されると、画像がある限り、すべての画像が 1 つの画像になります。一度呼び出すと、Web ページ全体に画像を提供できます。これには、IIS リンクが 1 つだけ必要になります。

制作プロセスでは、すべての画像に背景が実装されています。たとえば、 を使用して小さなアイコンが表示され、exp スタイルが背景に設定され、背景が画像になります。

例:

 .exp
{
background-image: url(bg.gif);/*背景图片*/
background-repeat: no-repeat;/*不平铺*/
background-position: -300px -50px;/*设置背景图片在整个图的位置，在前面加个负号*/
width=25px;/*宽度*/
height=25px;/*高度*/
}

上記のように、背景を設定するときは、画像上の背景の位置を指定し、幅と高さを制御して、同じようにアイコンが表示されるようにします。つまり、Web サイト全体のインターフェイスの画像はこのように表示され、各画像は大きな画像の一部です。

大きな画像内の各小さなアイコンの位置は、PS の線を使用して表示できます。