锐客网

  1. 首页 > 睿知 > it技术 > >

web学习的碎片之CSS的Sprite方法

CSS的Sprite方法
今天学习了一下CSS的Sprite方法，简单来讲就是把很多个需要用到的小图集成到一张大图里去，然后靠图片的定位来显示指定的图。为什么要这样做，无他，为了提高加载速度，我们都知道通常我们在传东西时，比如向u盘传资料，在文件大小相同的情况下，一个文件的传输速度是要比很多文件的传输快很多的。同理，在web页面加载中，对于网络效率的提高永远都是程序员们津津乐道的事情，所以我们会想尽各种办法来加快页面的加载速度和效率。
举个栗子：
我们要显示一个小箭头像这样
web学习的碎片之CSS的Sprite方法
文章图片
小箭头哦 但是我们有一张大图（相对来说算大咯）像这样
web学习的碎片之CSS的Sprite方法
文章图片
箭头库 怎么用呢，首先要有箭头的一席之地，比如我们写个div，设定合适的宽高，然后背景图设置为上面这张大图。通过background-position这个属性来定位你要的图片位置，就可以显示出来我们想要的小箭头了。
代码示例：

web学习的碎片之CSS的Sprite方法
文章图片
代码 Ps：定位的属性值可以是具体的px来定位x轴和y轴，也可以是百分比来定位。具体数值多少，就需要你自己动手检验咯，毕竟技术是需要动手来实现的。

现在我们已经写出来一个小箭头了，如果我想让鼠标指向箭头的时候箭头换个颜色该怎么办呢，当然不那么麻烦也是勉强可以使用的，但是，我们的目标是什么？用户体验啊，所以我们要稍加修饰咯。实现这个样式也很简单，只需要一个onmouseover和ongmouseout事件就可以了。

onmouseover和onmouseout事件
onmouseover和onmouseout分别表示鼠标指针移到和移出对象的时候执行一段指定的javascript代码。
他的语法是这样的：

web学习的碎片之CSS的Sprite方法
文章图片
语法 我们要实现箭头变换只需要把背景图的定位从白箭头定位到橙色箭头就可以了，所以在这我们用个小技巧，我们不需要另写一个script标签，我们直接在div标签里写内联样式，像这样：
web学习的碎片之CSS的Sprite方法
文章图片
代码示例 这样我们就实现了鼠标移到箭头上显示橙色箭头，鼠标移出显示白箭头的效果了。
另外提一下今天用到的position属性。
如何让子元素相对于父元素定位 我们假设有两个父子关系div，怎样让子div相对于父div来确定位置。
当父div的position属性为relative，子div的属性为absolute时，这时候控制子div的上下左右移动位置就是相对于父div来控制的。
ps：自己对position的理解并不怎么透彻，还需要继续学习。


我是一个刚入门的菜鸟，如果有大神看到我的文章，还请多多指教。——Elecrabbit
【web学习的碎片之CSS的Sprite方法】




    推荐阅读


    上一篇：【遇见是从来是一件美好的事】

    下一篇：我超可爱的