亲宝软件园·资讯

展开

css Sprites实例 css Sprites小实例代码

人气:0
想了解css Sprites小实例代码的相关内容吗,在本文为您仔细讲解css Sprites实例的相关知识和一些Code实例,欢迎阅读和指正,我们先划重点:css,Sprites,下面大家一起来学习吧。

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

下面是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应用中,我们便可以解决背景图片从新加载的问题 

加载全部内容

相关教程
猜你喜欢
用户评论