CSSスプライトとは何ですか? CSSスプライトスキルまとめ
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 サイトの他の関連記事を参照してください。
ホットAIツール
Undresser.AI Undress
リアルなヌード写真を作成する AI 搭載アプリ
AI Clothes Remover
写真から衣服を削除するオンライン AI ツール。
Undress AI Tool
脱衣画像を無料で
Clothoff.io
AI衣類リムーバー
Video Face Swap
完全無料の AI 顔交換ツールを使用して、あらゆるビデオの顔を簡単に交換できます。
人気の記事
ホットツール
メモ帳++7.3.1
使いやすく無料のコードエディター
SublimeText3 中国語版
中国語版、とても使いやすい
ゼンドスタジオ 13.0.1
強力な PHP 統合開発環境
ドリームウィーバー CS6
ビジュアル Web 開発ツール
SublimeText3 Mac版
神レベルのコード編集ソフト（SublimeText3）
ホットトピック
7696
15
1640
14
1393
52
1287
25
1229
29
VueでBootstrapの使用方法
Apr 07, 2025 pm 11:33 PM
vue.jsでBootstrapを使用すると、5つのステップに分かれています。ブートストラップをインストールします。 main.jsにブートストラップをインポートしますブートストラップコンポーネントをテンプレートで直接使用します。オプション：カスタムスタイル。オプション：プラグインを使用します。
HTML、CSS、およびJavaScriptの役割：コアの責任
Apr 08, 2025 pm 07:05 PM
HTMLはWeb構造を定義し、CSSはスタイルとレイアウトを担当し、JavaScriptは動的な相互作用を提供します。 3人はWeb開発で職務を遂行し、共同でカラフルなWebサイトを構築します。
ブートストラップにスプリットラインを書く方法
Apr 07, 2025 pm 03:12 PM
ブートストラップスプリットラインを作成するには2つの方法があります。タグを使用して、水平方向のスプリットラインを作成します。 CSS Borderプロパティを使用して、カスタムスタイルのスプリットラインを作成します。
HTML、CSS、およびJavaScriptの理解：初心者向けガイド
Apr 12, 2025 am 12:02 AM
webdevelopmentReliesOnhtml、css、andjavascript：1）htmlStructuresContent、2）cssStylesit、および3）Javascriptaddsinteractivity、形成、
ブートストラップに写真を挿入する方法
Apr 07, 2025 pm 03:30 PM
ブートストラップに画像を挿入する方法はいくつかあります。HTMLIMGタグを使用して、画像を直接挿入します。ブートストラップ画像コンポーネントを使用すると、レスポンシブ画像とより多くのスタイルを提供できます。画像サイズを設定し、IMG-Fluidクラスを使用して画像を適応可能にします。 IMGボーダークラスを使用して、境界線を設定します。丸い角を設定し、IMGラウンドクラスを使用します。影を設定し、影のクラスを使用します。 CSSスタイルを使用して、画像をサイズ変更して配置します。背景画像を使用して、背景イメージCSSプロパティを使用します。
ブートストラップボタンの使用方法
Apr 07, 2025 pm 03:09 PM
ブートストラップボタンの使用方法は？ブートストラップCSSを導入してボタン要素を作成し、ブートストラップボタンクラスを追加してボタンテキストを追加します
ブートストラップのフレームワークをセットアップする方法
Apr 07, 2025 pm 03:27 PM
Bootstrapフレームワークをセットアップするには、次の手順に従う必要があります。1。CDNを介してブートストラップファイルを参照してください。 2。独自のサーバーでファイルをダウンロードしてホストします。 3。HTMLにブートストラップファイルを含めます。 4.必要に応じてSASS/LESSをコンパイルします。 5。カスタムファイルをインポートします（オプション）。セットアップが完了したら、Bootstrapのグリッドシステム、コンポーネント、スタイルを使用して、レスポンシブWebサイトとアプリケーションを作成できます。
