スプライトマップとは何ですか
スプライト図は、スプライトは、また、CSSスプライトと呼ばれていたCSSであり、CSSは、画面上のマルチ張アイコンに組み込まれ、その後表示されるセクションを表示するCSSの背景位置を使用する場合には、画像合成技術です。
なぜ使用スプライトマップ
ロードウェブ画像は、ページの読み込み速度を向上させるIE6を解決するために見える白い点滅したときに、サーバーへのリクエストの数を減らすことができたときの現象上にマウスロール。
スプライトマップと欠点は何ですか
個人的にあなたのスプライトの図は、基本的には欠点が非常に複雑で、非常に大きなではないではないではない場合だと思います。あなたのスプライトが大規模で複雑なケースを描く場合は、CSSコードレビューが表示され、ページメモリと大の問題を占めています。
例
上記のボタンであり、第二は、それを超える場合、マウスのようなものです
これは、二つのスプライト図合成に小さいアイコンであります
<div class="user"><span></span>个人中心</div>
.user {
width: 108px;
height: 34px;
border:1px #ddd solid;
float: right;
margin-top: 36px;
line-height: 34px;
border-radius: 3px;
transition: all 0.3s;
-moz-transition: all 0.3s;
-webkit-transition: all 0.3s;
-ms-transition: all 0.3s;
}
.user span{
display: inline-block;
width: 20px;
height: 22px;
overflow:hidden;
margin:5px 10px 5px 10px;
float:left;
background-image:url(../img/user.png);
background-repeat: no-repeat;
background-position: 0px -22px;
transition: all 0.3s;
-moz-transition: all 0.3s;
-webkit-transition: all 0.3s;
-ms-transition: all 0.3s;
}
.user:hover {
border:1px #ff9600 solid;
color:#f00;
}
.user:hover span{
background-position: 0px 0px;
}
web前端开发学习Q-q-u-n： 491404389 ，分享学习的方法和需要注意的小细节，不停更新最新的教程和学习方法（详细的前端项目实战教学视频，PDF）これらは、コードの実装であり、この過剰な自己効果（トランジション）を無視してください。
画像位置の始まりを決定することもできませんでした。実際には非常に単純な、限り、あなたはその絵は左上隅（0,0）からであることを覚えているとして始まりました。
私はこれを理解するために表示されるかどうかわかりません