例：将此图片作为背景图片导入。
<ul >绿色</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导入的图片可以改变大小。