如何使用CSS sprite

Jessica     CSS     CSS

今天同学发给我个弹出式登陆框.并可选择Email和用户名登录的例子

问我为什么里面只有一张图片.这是怎么实现的.

这个图片如下

其实实现方法非常简单.你可以去看下他的CSS.这里我就不用他具例子了.

我自己做个图片.如下

我们可以想一下.

如果我把这张图片的左上角坐标定为0.

那么我就可以通过CSS获取我想要的位置了.

我们来看下CSS.看注释就明白了

*{  
    border:0;  
    margin:0;  
    padding:0;  
}  
#div1 {  
    background:url(21321321321.jpg) no-repeat; /* 从左上角的0 0点开始 */ 
    height:40px;  /* 第一张图片的高度 */ 
    width:120px;  /* 第一张图片的宽度 */ 
}  
#div2 {  
    background:url(21321321321.jpg) -120px 0 no-repeat; /* 从左上角的-120px 0点开始,负数不明白?自己试试就知道了 */ 
    height:70px;  /* 第二张图片的高度 */ 
    width:129px;  /* 第二张图片的高度 */ 
} 

完整的例子下载:

点我下载