欢迎来到福编程网,本站提供各种互联网专业知识!

css Sprites小实例代码

发布时间:2008-05-29 作者: 来源:转载
今天在蓝色理想瞎逛,看见了Realazy的教程CSSSprites,于是来自己做了个小东西,效果在这里

这是一个很简单的应用,不过在设计中,这样做可以减轻服务器的压力,是请求次数减少,是一个不错的方法。
特别要说明的是,在这种小图片上即使是两张图片其实就响应时间来说也慢不了多少,不过有一个问题,就是两张图片交替时容易出现背景图片从新加载而导致很段时间不显示的效果。(时间长短视服务器的响应速度和图片大小而变化)

下面是css的部分:

body{
font-family:"LucidaSans","LucidaSansUnicode";
font-size:14px;
line-height:24px;
}
ul{
list-style-type:none;
}
li{
float:left;

}
a{
background-image:url(bg.gif);
height:26px;
background-position:53px0px;
display:block;
margin-right:10px;
width:53px;
text-align:center;
color:#333333;
}

lia:link{
text-decoration:none;
}
lia:visited{
text-decoration:none;
}
lia:hover{
text-decoration:none;
background-position:00px;//在这里规定从某一坐标开始显示图片}


从上面的代码不难看出,这里面起决定性作用的是

background-position:**px;


这样,在复杂的css应用中,我们便可以解决背景图片从新加载的问题

相关推荐