CSSスプライトとは何ですか? CSSスプライトスキルまとめ-CSSチュートリアル-php.cn

ホームページ

ウェブフロントエンド

CSSチュートリアル

CSSスプライトとは何ですか? CSSスプライトスキルまとめ

零下一度

Apr 25, 2017 pm 03:16 PM

css

Css スプライトはフロントエンドスタッフとしてマスターする必要がありますが、学習したばかりの学生にとっては難しいものです。ここでネットワーク画像アドレスが表示されていない場合は、それを確認できます。 out in my Personal blog

CSSスプライトとは何ですか? CSSスプライトスキルまとめ

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 サイトの他の関連記事を参照してください。

声明

この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。

利用CSS怎么创建渐变色边框？5种方法分享Oct 13, 2021 am 10:19 AM

利用CSS怎么创建渐变色边框？下面本篇文章给大家分享CSS实现渐变色边框的5种方法，希望对大家有所帮助！

css ul标签怎么去掉圆点Apr 25, 2022 pm 05:55 PM

在css中，可用list-style-type属性来去掉ul的圆点标记，语法为“ul{list-style-type:none}”；list-style-type属性可设置列表项标记的类型，当值为“none”可不定义标记，也可去除已有标记。

css与xml的区别是什么Apr 24, 2022 am 11:21 AM

区别是：css是层叠样式表单，是将样式信息与网页内容分离的一种标记语言，主要用来设计网页的样式，还可以对网页各元素进行格式化；xml是可扩展标记语言，是一种数据存储语言，用于使用简单的标记描述数据，将文档分成许多部件并对这些部件加以标识。

css3怎么实现鼠标隐藏效果Apr 27, 2022 pm 05:20 PM

在css中，可以利用cursor属性实现鼠标隐藏效果，该属性用于定义鼠标指针放在一个元素边界范围内时所用的光标形状，当属性值设置为none时，就可以实现鼠标隐藏效果，语法为“元素{cursor:none}”。

rtl在css是什么意思Apr 24, 2022 am 11:07 AM

在css中，rtl是“right-to-left”的缩写，是从右往左的意思，指的是内联内容从右往左依次排布，是direction属性的一个属性值；该属性规定了文本的方向和书写方向，语法为“元素{direction:rtl}”。

css怎么设置i不是斜体Apr 20, 2022 am 10:36 AM

在css中，可以利用“font-style”属性设置i元素不是斜体样式，该属性用于指定文本的字体样式，当属性值设置为“normal”时，会显示元素的标准字体样式，语法为“i元素{font-style:normal}”。

css怎么实现英文小写转为大写Apr 25, 2022 pm 06:35 PM

转换方法：1、给英文元素添加“text-transform: uppercase;”样式，可将所有的英文字母都变成大写；2、给英文元素添加“text-transform:capitalize;”样式，可将英文文本中每个单词的首字母变为大写。

怎么设置rotate在css3的旋转中心点Apr 24, 2022 am 10:50 AM

在css3中，可以用“transform-origin”属性设置rotate的旋转中心点，该属性可更改转换元素的位置，第一个参数设置x轴的旋转位置，第二个参数设置y轴旋转位置，语法为“transform-origin:x轴位置 y轴位置”。

See all articles

ホットAIツール

Undresser.AI Undress

リアルなヌード写真を作成する AI 搭載アプリ

AI Clothes Remover

写真から衣服を削除するオンライン AI ツール。

Undress AI Tool

脱衣画像を無料で

Clothoff.io

AI衣類リムーバー

AI Hentai Generator

AIヘンタイを無料で生成します。

ホットツール

EditPlus 中国語クラック版

サイズが小さく、構文の強調表示、コードプロンプト機能はサポートされていません

SecLists

SecLists は、セキュリティテスターの究極の相棒です。これは、セキュリティ評価中に頻繁に使用されるさまざまな種類のリストを 1 か所にまとめたものです。 SecLists は、セキュリティテスターが必要とする可能性のあるすべてのリストを便利に提供することで、セキュリティテストをより効率的かつ生産的にするのに役立ちます。リストの種類には、ユーザー名、パスワード、URL、ファジングペイロード、機密データパターン、Web シェルなどが含まれます。テスターはこのリポジトリを新しいテストマシンにプルするだけで、必要なあらゆる種類のリストにアクセスできるようになります。