CSSスプライト（画像統合技術）の原理-スプライトマップ（スプライトマップ）
-
原理：
ナビゲーションの背景画像、ボタン、背景画像、その他の通常の画像を組み合わせて背景画像、複数の画像を全体図としてまとめbackground-position、背景画像の位置決め技術を実現します。 -
画像統合の利点：
1）サーバーへのリクエスト数を減らすための画像統合により、ページの読み込み速度が向上します。
2）画像を統合して、画像のサイズを縮小します。
ツールを使用してスプライトマップを作成します。
- psを使用してレイヤーを作成します。背景は透明です。背景画像をこのレイヤーにコピーして配置し
ます。すべての背景画像を選択してpsにドラッグし、各画像を順番にダブルクリックして、ドラッグして配置します。
- 生産のためのツールの使用：
ツールを開き、すべての背景画像を選択し、ツールにドラッグして、背景画像を自動的に配置します。
- [生成]をクリックすると、2つのファイルが生成されます:(スプライト画像とhtmlファイル）
写真：
htmlファイル：
<!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" />
<style type="text/css">
<!--
body, ul, li {
margin: 0; padding: 0; font-size: 14px;}
body {
padding: 30px; background-color: #ccc;}
ul {
margin: 5px 0 10px 0;}
ul li {
list-style: none; display: block;}
li.classname {
font-weight: bold; }
.csscode, pre {
padding: 10px; border: 1px solid #999; display: block; background-color: #fff; width: 100%; font-size: 12px; line-height: 200%;}
li.classmark {
font-size: 12px; margin: 5px; line-height: 160%; display: none;}
/*
一下代码由程序自动生成。
*/
.pic {
background-image: url("CSS Satyr.png"); display: block;}
.pic_1 {
background-position: -0px -0px; width: 7px; height: 4px; }
.pic_2 {
background-position: -7px -0px; width: 10px; height: 14px; }
.pic_3 {
background-position: -17px -0px; width: 17px; height: 16px; }
.pic_4 {
background-position: -34px -0px; width: 21px; height: 18px; }
.pic_5 {
background-position: -55px -0px; width: 19px; height: 16px; }
//-->
</style>
<title>CSS Satyr - http://shen.li/</title>
</head>
<body>
<h2>CSS Satyr</h2>
<ul>
<li>版本：1.2.0.0</li>
<li>作者：shen.li</li>
<li>主页：<a href="http://shen.li/blog/post/C_sharp/CSS_Satyr.html" target="_blank">http://shen.li/blog/post/C_sharp/CSS_Satyr.html</a></li>
<li>图片：<a href="CSS Satyr.png">C:\Users\李欣欣\Desktop\CSS Satyr.png</a></li>
</ul>
<h2>CSS 代码</h2>
<pre>
.shen_li {background-image: url("CSS Satyr.png"); display: block;}
.pic_1 {background-position: -0px -0px; width: 7px; height: 4px; }
.pic_2 {background-position: -7px -0px; width: 10px; height: 14px; }
.pic_3 {background-position: -17px -0px; width: 17px; height: 16px; }
.pic_4 {background-position: -34px -0px; width: 21px; height: 18px; }
.pic_5 {background-position: -55px -0px; width: 19px; height: 16px; }
</pre>
<h2>调用效果</h2>
<ul><li class="classname">jiantou.png</li><li><div class="csscode"> <span class="pic pic_1"> ... </span></div></li><li class="classmark">jiantou.png</li><li class="pic pic_1"></li></ul>
<ul><li class="classname">phone.png</li><li><div class="csscode"> <span class="pic pic_2"> ... </span></div></li><li class="classmark">phone.png</li><li class="pic pic_2"></li></ul>
<ul><li class="classname">qq.png</li><li><div class="csscode"> <span class="pic pic_3"> ... </span></div></li><li class="classmark">qq.png</li><li class="pic pic_3"></li></ul>
<ul><li class="classname">scar.png</li><li><div class="csscode"> <span class="pic pic_4"> ... </span></div></li><li class="classmark">scar.png</li><li class="pic pic_4"></li></ul>
<ul><li class="classname">tel.png</li><li><div class="csscode"> <span class="pic pic_5"> ... </span></div></li><li class="classmark">tel.png</li><li class="pic pic_5"></li></ul>
</body>
</html>
使用方法：
最初に、簡単に使用できるように画像の名前をCSS_Satyr.pngに変更します。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>精灵图使用</title>
<style>
* {
margin: 0;
padding: 0;
}
/* 复制自上面的html文件，表示设置精灵图中背景图的标签添加类名pic */
.pic {
background-image: url("images/CSS_Satyr.png");
/* 修改图片路径 */
display: block;
}
/* 第一个背景图在精灵图的位置信息，下面相同，都是由工具自动生成 */
.pic_1 {
background-position: -0px -0px;
width: 7px;
height: 4px;
}
.pic_2 {
background-position: -7px -0px;
width: 10px;
height: 14px;
}
.pic_3 {
background-position: -17px -0px;
width: 17px;
height: 16px;
}
.pic_4 {
background-position: -34px -0px;
width: 21px;
height: 18px;
}
.pic_5 {
background-position: -55px -0px;
width: 19px;
height: 16px;
}
</style>
</head>
<body>
<span class="pic pic_1"></span>
<span class="pic pic_2"></span>
<span class="pic pic_3"></span>
<span class="pic pic_4"></span>
<span class="pic pic_5"></span>
</body>
</html>
最後に、背景画像が対応する要素に順番に表示されます