ホームページ >ウェブフロントエンド >フロントエンドQ&A >CSSスプライトとは何ですか
CSSスプライトとは何ですか
- 青灯夜游オリジナル
- 2021-05-12 16:44:442613ブラウズ
css スプライトは、Web ページの背景画像を処理する方法です。実際には、ページに含まれる散在するすべての画像が 1 つの大きな画像に含まれ、その大きな画像が Web ページに適用されます。このようにして、ユーザーがページにアクセスしたときに、サービスにリクエストを送信するだけで済みます。背景画像を全面表示できます。
このチュートリアルの動作環境: Windows 7 システム、CSS3&&HTML5 バージョン、Dell G3 コンピューター。
CSS スプライトとは何ですか?
「CSS スプライト」は、通常「CSS 画像ステッチング」、「CSS マップ配置」、または「CSS 画像スプライト」、「CSS スプライト」とも解釈され、Web 画像です。アプリケーションの処理方法。実際には、ページ内に散在するすべての画像を 1 つの大きな画像に含めることにより、ページにアクセスしたときに、読み込まれた画像が以前のように 1 枚ずつゆっくり表示されることがなくなります。
ユーザーがページにアクセスすると、サービスにリクエストを送信するだけで、Web ページ内のすべての背景画像を表示できます。
例:
利点
CSS スプライトを使用すると、Web ページの http リクエストを効果的に削減できます。したがって、ページのパフォーマンスが大幅に向上します。これは CSS スプライトの最大の利点でもあり、CSS スプライトが広く普及し適用される主な理由です。
CSS スプライトは画像のバイト数を削減できます。 3 枚の画像を 1 枚の画像に結合するバイト数は、これら 3 枚の画像のバイト数の合計よりも常に小さくなります。
Web デザイナーが写真に名前を付ける問題を解決します。写真の集合に名前を付けるだけで済みます。小さな要素に名前を付ける必要がなくなり、Web ページの効率が向上します。生産。
スタイルの変更は簡単です。1 つまたはいくつかの画像の色やスタイルを変更するだけで、Web ページ全体のスタイルを変更できます。メンテナンスがより便利になります。
スプライト技術の使用
cssスプライト(スプライト)とは、実際には複数の画像を1つに結合するものです。 、Web ページの背景は、CSS 背景配置テクノロジによってレイアウトされます。画像を使用する必要がある場合、現在の段階では、CSS 属性のbackground-imageをbackground-repeat、background-positionなどと組み合わせて使用して画像を表示します。
#例:
スプライト解析:
##コード:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title></title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
*{
margin: 0;
padding: 0;
}
.sprites{
width: 200px;
margin: 50px auto;
}
.sprites div{
margin: 5px;
}
.sprites span{
float: left;
width: 20px;
height:20px;
background: url('./images/icon.png');/* 引用精灵图 */
background-size: 60px 40px;
}
.sprites1{
background-position: 0 0;
}
.sprites2{
background-position: -20px 0 !important;
}
.sprites3{
background-position: 0 -20px !important;
}
.sprites4{
background-position: -20px -20px !important;
}
.sprites5{
background-position: -40px 0 !important;
}
</style>
</head>
<body>
<div class="sprites">
<div><span class="sprites1"></span>付款图标</div>
<div><span class="sprites2"></span>存款图标</div>
<div><span class="sprites3"></span>删除图标</div>
<div><span class="sprites4"></span>粘贴图标</div>
<div><span class="sprites5"></span>笑脸图标</div>
</div>
</body>
</html>
学習ビデオ共有:
以上がCSSスプライトとは何ですかの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。