ホームページ > 記事 > ウェブフロントエンド > CSSスプライトとは何ですか? CSSスプライトスキルまとめ
CSSスプライトとは何ですか? CSSスプライトスキルまとめ
- 零下一度オリジナル
- 2017-04-25 15:16:283133ブラウズ
Css スプライトはフロントエンドスタッフとしてマスターする必要がありますが、学習したばかりの学生にとっては難しいものです。ここでネットワーク画像アドレスが表示されていない場合は、それを確認できます。 out in my Personal blog
CSS スプライトは中国では多くの人が css スプライトと呼んでおり、Web 画像アプリケーションの処理方法です。これにより、ページに含まれる散在するすべての画像を 1 つの大きな画像に含めることができるため、ページにアクセスしたときに、以前のように読み込まれた画像が 1 つずつ表示されることはなくなります。現在一般的なネットワーク速度では、200KB を超えない 1 つの画像の読み込み時間は基本的に同じであるため、この問題を心配する必要はありません。加速の鍵は軽量化ではなく、ユニット数を減らすことだ。従来の画像カットでは、画像サイズが小さいほど優れており、実際には、サイズは重要ではなく、コンピューターはすべてバイト単位で計算します。クライアントは画像を表示するたびに、サーバーにリクエストを送信します。そのため、写真の枚数が多いほどリクエストも多くなり、遅れる可能性が高くなります。
CSS スプライトは実際に Web ページ内のいくつかの背景画像を画像ファイルに統合し、CSS の「background-image」、「background-repeat」、「background-position」の組み合わせを使用して背景の位置決めとbackground-positionを実行します。数値を使用すると、背景画像の位置を正確に特定できます。
では、今は理解できない子供用靴について明確かつ新たに理解できるように、その使用テクニックを詳しく説明します。現在そのようなツールがありますが、最初にその原理を理解し、実行する必要があります。以下にその事例を紹介します。
まず第一に、配置する必要がある背景はすべて 1 つの画像にマージされているため、それらはすべて同じであり、X 軸座標が一貫しているか、Y 軸座標が一貫しているかのどちらかであることを説明させてください。それがこれから説明する2種類です。
1.水平配置座標
水平配置座標とは、Y 軸座標が固定されており、各アイコンの高さが一定であり、X 座標の位置を変更することで背景が変更されるのが特徴です。各アイコンの幅を測定するだけで、X 軸座標がわかります。このルールをまだご存じない方のために、私が行った 2 つのケースを例に挙げて説明します。
それでは、X座標を位置に変更する方法を詳しく説明しましょう。
高さが同じなので、Y軸の座標はすべて0または上です
ここでは各アイコンの背景としてスパンを使用しています。コードを詳しく分析してみましょう:
<div class="join c">
<strong>Join us on:</strong>
<ul class="c">
<li><a href="https://www.facebook.com/Fancyladies"><span class="sl">Facebook</span><span class="sharelogo facebookLogo"></span></a></li>
<li><a href="http://pinterest.com/fancyladies/ "><span class="sl">Pinterest</span><span class="sharelogo pinterestLogo"></span></a></li>
<li><a href="https://twitter.com/fancyladiescorp"><span class="sl">Twitter</span><span class="sharelogo twitterLogo"></span></a></li>
<li><a href="http://www.flickr.com/photos/fancyladies"><span class="sl">flickr</span><span class="sharelogo flickrLogo"></span></a></li>
<li><a href="http://www.youtube.com/user/fancyladiescom"><span class="sl">Youtube</span><span class="sharelogo youtubeLogo"></span></a></li>
<li><a href="http://www.fancyladies.com/blog/"><span class="sl">Blog</span><span class="sharelogo blogLogo"></span></a></li>
</ul>
</div>以下はCssです。コード:
.sharelogo{display:inline-block;*display:inline;*zoom:1;height:46px;background-image:url(../images/shareIcon.jpg);background-repeat:none;}
.facebookLogo{background-position:0 0;width:20px;}
.pinterestLogo{background-position:-20px 0;width:42px;}
.twitterLogo{background-position:-62px 0;width:30px;}/**/
.flickrLogo{background-position:-92px 0;width:130px;}
.youtubeLogo{background-position:-222px 0;width:98px}
.blogLogo{background-position:-320px 0;width:84px;}
.sl{float:left;padding-right:10px;}背景画像はすべて同じ背景を共有します:background-image:url(../images/shareIcon.jpg);
各要素の背景は繰り返すことができません:つまり、background-repeat :no-repeat;
これを読んだ後、各要素の座標は前の要素の座標値に幅を加えたものに等しいというルールを発見しました。つまり、要素の水平方向の座標値式は と等しい。隣接する要素の座標値に幅を加えた値。
pinterestLogo の値は、facebookLogo の座標値 20px + facebookLogo の幅 20px に等しくなります。水平座標には固定幅を与える必要があるため、要素の幅がわかれば非常に簡単ではないでしょうか。 , したがって、このステップで幅を測定することは時間の無駄ではありません。ソースコード内の座標値のパターンを詳しく見ていきたいと思います。
水平方向または垂直方向に配置する場合、開始位置はbackground-position: 0 0; ですが、水平方向に配置する場合は高さが固定されるため、毎回 X 座標の値を変更するだけで済みます。
例えば、Facebookのロゴは開始位置のアイコンなので、その座標値は0,0であり、これによって位置決めが実現されます。
そして、その下にある Pinterest のロゴは、Facebook の幅のマイナスの値から計算されます。 Facebook の幅は 21px なので、Pinterest のロゴの座標は、background-position: -20px 0; のようになります。
twitterLogo は、pinterstLogo の下にあるので、pinterstLogo の座標値に、pinterstlogo
の幅を加えたものが得られます。 twitterロゴの座標。つまり -(20px+42px)=-62px; つまり、twitterLogo の座標値は.twitterLogo{background-position:-62px 0;width:30px;}
これを読んだあなたは、次のような規則を発見しました。つまり、隣接する各要素の座標は、前の要素の座標値にその前の要素の幅を加えたものに等しくなります。つまり、要素の水平座標値は に等しい。隣接する要素の座標値にその幅を加えた値。さて、2 番目のオプションについて話しましょう。
2. 垂直方向の配置座標
垂直方向の配置座標は、X 軸の座標が固定されており、Y 軸の座標値を変更することで背景が変化するため、X 軸の座標は常に変化しません。同じ、つまり 0 または左。以下に事例を紹介します
CSS コード:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<style type="text/css">
ul{margin:0;padding:0;float:left;width:32px;}
ul li{float:left;list-style-type:none;width:32px;background-image:url(image/bg.jpg);background-repeat:none;margin:10px 0;}
.f{background-position:0 0;height:32px;}
.p{background-position:0 -32px;height:20px}/*Y轴坐标等于起始位置的高度 即：-（0+32）*/
.fr{background-position:0 -52px;height:32px;}/*等于前面元素的Y轴坐标加上前面元素的高度,即：-（32+20） */
.h{background-position:0 -84px;height:32px;}/*等于前面元素的Y轴坐标加上前面元素的高度*即：-（52+32）*/
.t{background-position:0 -116px;height:32px;}/*等于前面元素的Y轴坐标加上前面元素的高度，即：-（84+32）*/
</style>
</head>
<body>
<ul>
<li class="f"></li>
<li class="p"></li>
<li class="fr"></li>
<li class="h"></li>
<li class="t"></li>
</ul>
</body>
</html>3. 幅と高さが等しい場合、それが最善です。あなたの算数の能力は小学校 3 年生を超えていると思います。まだ共有しましょう。
1. 幅と高さを等しくしたい場合、この状況は通常、一連のボタンの下で発生し、マウスがスライドしてクリックされると背景が変わります。この状況についてもまとめました:
X 軸座標 = -n (開始位置 + 幅)
ここで、n の値は 0 から始まります。つまり、すべての開始位置の座標は 0 であり、0 から始まります。以下も同様です。
たとえば、ここで配置したい要素は 3 番目の要素であるとします。その場合、その X 軸座標は に等しいとします。 x=-3*(0+30px);
Y軸座標 =-n (開始位置 + 高さ)
例えば、ここの高さも32pxと仮定すると、今配置したいアイコンは6番目の位置になります。 ; すると、彼の Y 軸座標は
Y=-6 (0+32px) =-192px です。笑、もちろん、gaga というツールは非常に優れていますが、私はそれを使ったことはありません。私のこのセットは私自身が実際に使ってみて非常に便利だと感じたので共有したいと思います。
以上がCSSスプライトとは何ですか? CSSスプライトスキルまとめの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。