了解CSS sprites:CSS sprites 代码如下:CSS div{ width:20px; height:20px; margin:15px; float:left; background-image:url(http://hi.csdn.net/attachment/201104/1/4056353_1301638793sHmM.png); } .div1{ background-position:0 0; } .div2{ background-position:0% 5%; } .div3{ background-position:0% 15%; } .div4{ background-position:0% 20%; } .div5{ background-position:0% 25%; } .div6{ background-position:0% 30%; } 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=gb2312" /> <title>CSS_hack技术实例代码</title> </head> <body> <div id="wrapper" class="div1"></div> <div id="wrapper" class="div2"></div> <div id="wrapper" class="div3"></div> <div id="wrapper" class="div4"></div> <div id="wrapper" class="div5"></div> <div id="wrapper" class="div6"></div> </body> </html> 原背景图: css定位后的效果图: