由于css reset的使用 大部分图片都是要定位的 这就要用到background-position这个属性了
background-position:0 0里面可传2个参数
第一个是左右 第二个是上下
比如:
background-position:-20px -30px
这代表 图片重 左边 20像素 下面30像素 的地方取图片
但是有很多小图片呢 我们怎么能轻松一下全部定位呢?
JQ的方法如下:
css
.a{float:left;width:20px;height:20px;background-image:url();};
<div>
<a href="" class="a" top="1" left="1">
<a href="" class="a" top=“2” left="2">
<a href="" class="a" top=“3” left="3">
</div>
我怎么批量改图片位置呢?
$(function(){
$(".a").each(function(){
var top=$(this).attr("top"),
left=$(this).attr("left");
$(this).css("background-position",left+'px '+top+'px');这里第一个"px "后面是又空格的 要不是不能运行的
})
})
这样我们只用在标签上面吧位置算出来就可以了 不用写多个CSS样式 和class
这是对多个重复使用同一张图用的技巧。