很多网站现在都把一些小图标融合到一张图片上，然后用CSS背景图片绝对定位来展示自己想显示的图标，今天青岛星网就跟大家一起分享下CSS背景图片定位的使用方法。
<div class="home_whochoose"> <ul> <li class="num1"></li> <li class="num2"></li> <li class="num3"></li> <li class="num4"></li> <li class="ml88"></li> <li class="num6"></li> <li class="num7"></li> </ul> </div>
.home_whochoose{width:730px;height:370px;}
.home_whochoose ul
li{height:141px;width:170px;padding:56px 0 0
0;margin-left:5px;margin-bottom:-46px;_margin-bottom:-99px;float:left;}
.home_whochoose .num1{ background:url(01.png) no-repeat -15px -30px;}
.home_whochoose .num1:hover{ background:url(02.png) no-repeat -7px -17px;}
.home_whochoose .num2{ background:url(01.png) no-repeat -191px -30px;}
.home_whochoose .num2:hover{ background:url(02.png) no-repeat -191px -17px;}
.home_whochoose .num3{ background:url(01.png) no-repeat -370px -30px;}
.home_whochoose .num3:hover{ background:url(02.png) no-repeat -380px -17px;}
.home_whochoose .num4{ background:url(01.png) no-repeat -550px -30px;}
.home_whochoose .num4:hover{ background:url(02.png) no-repeat -569px -17px;}
.home_whochoose .ml88{margin-left: 92px;_margin-left: 46px; background:url(01.png) no-repeat -103px -293px;}
.home_whochoose .ml88:hover{margin-left: 92px;_margin-left: 46px; background:url(02.png) no-repeat -102px -275px;}
.home_whochoose .num6{background:url(01.png) no-repeat -280px -293px;}
.home_whochoose .num6:hover{ background:url(02.png) no-repeat -287px -275px;}
.home_whochoose .num7{background:url(01.png) no-repeat -460px -293px;}
.home_whochoose .num7:hover{ background:url(02.png) no-repeat -477px -275px;}青岛星网总结：CSS背景图片绝对定位其实非常简单，就是定义1个背景图片，然后 no-repeat(不平铺)后面跟2个数值，第一个数值是图片水平距离，第二个数值是图像垂直距离，数值可以是负值哦。
是不是非常简单哦。点击看：CSS图片背景定位实现六边形排版演示
在线QQ：
