在CSS中对背景图的作法.一般都是这样:
- background: url(images/*.gif) no-repeat;
但有时候有很多图片的时候,像我的Maxthon主题,就用了很多的背景图和图标.这时候如果还这样做的话就会带来一个问题,图片在加载中会有个过程.虽然很快.但有的图片在一开始并没有加载进来,而是在响应鼠标事件时才开始加载.像我的导航栏.默认是一个背景,鼠标放上去是一个背景,当前页又是另一个背景.这时如果还像普通的处理的话,当鼠标放上去后,并不能马上看到图片.所以在Maxthon 2.0中我已经不用以前的方法来做了.而是选择把所有的背景图片放到一张图上.就像下面这样.
放到一起后,当鼠标放上去后而不用向服务器请求,因为图片已经在第一次就已加载完成,不会产生延迟的效果.这样做还有个好处,就是可以减少向服务器请求的次数.从而使加载更快.
现在来说说放到一张图上后,CSS中该怎么定义?
以我的导航栏为例:
假如我们在做图的时候,图片的上面是默认时的背片,中间是鼠标放去时的.下面是当前页码的.图片的高度是30PX;那么这张图的总高度是90PX;
然后我们在CSS中这样写:
- #nav li a {background: url(images/bg_nav.gif) 0 0 repeat-x;}默认时的
- #nav li a:hover {background: url(images/bg_nav.gif) 0 -30px repeat-x;}鼠标放上去时的
- #nav li a .current {background: url(images/bg_nav.gif) 0 -60px repeat-x;}当前页效果的
我们在CSS中定义的背景图都是同一张,我们通过改变他的Y座标起始位置来定位.因为我们的高度已经是固定了的30PX,和图片的高度是一样的.然后让它沿X坐标平铺.这样就达到我们要的效果了.
Tags: 标签：css, repeat
本博客所有文章如果没加特殊说明均为原创，如需转载引用请注明出处
[重阳博客：http://www.99xunle.com/archives/92]
[重阳博客：http://www.99xunle.com/archives/92]
| 随机文章 | 相关文章 |
|---|---|
