大学IT网 - 最懂大学生的IT学习网站! QQ资料交流群:367606806
当前位置:大学IT网 > CSS技巧 > css Sprites小实例代码

css Sprites小实例代码

关键词:cssSprites  阅读(575) 赞(8)

[摘要]本文是对css Sprites小实例代码的讲解,对学习CSS编程技术有所帮助,与大家分享。


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

下面是css的部分:

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

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

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


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

background-position:* *px;


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


相关评论