背景图片的正确导入方式

例：将此图片作为背景图片导入。

<ul id="skin">
  <li id="skin_0" title="蓝色" class="selected">深蓝色</li>
  <li id="skin_1" title="紫色">紫色</li>
  <li id="shin_2" title="红色">红色</li>
  <li id="shin_3" title="蓝色">淡蓝色</li>
  <li id="shin_4" title="黄色">黄色</li>
  <li id="shin_5" title="绿色">绿色</li>
 </ul>

#skin{
 width: 120px;
 border: 1px solid #ccc;
 background-color: #fff;
 margin: 10px;
 padding: 4px;
}
#skin li{
 float: left;
 width: 15px;
 height: 15px;
 text-indent: -9999px;
 overflow: hidden;
 display: block;
 cursor: pointer;
 margin-left: 4px;
 background-image:url(images/theme.gif); 
}
#skin_0{
 background-position: 0px  0;
}
#skin_1{
 background-position: 15px 0;
}
#shin_2{
 background-position: 35px 0;
}
#shin_3{
 background-position: 55px 0;
}
#shin_4{
 background-position: 75px 0;
}
#shin_5{
 background-position: 95px 0;
}
#skin_0.selected{
 background-position: 0px 15px;
}
#skin_1.selected{
 background-position: 15px 15px;
}
#shin_2.selected{
 background-position: 35px 15px;
}
#shin_3.selected{
 background-position: 55px 15px;
}
#shin_4.selected{
 background-position: 75px 15px;
}
#shin_5.selected{
 background-position: 95px 15px;
}

图片先通过background-image导入，在通过background-position调整位置。

注:通过背景导入的图片无法改变其大小，通过img导入的图片可以改变大小。

背景图片的正确导入方式

原文：http://www.cnblogs.com/pcd12321/p/4532714.html