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应用中,我们便可以解决背景图片从新加载的问题
您可能感兴趣的文章:- CSS圆角区块容器生成器
- CSS实现光滑圆角效果
- 用js实现CSS圆角生成更新
- 用js实现的抽象CSS圆角效果!!
- 纯CSS生成抗锯齿圆角的代码
- 提取自百度有啊的css圆角效果
- CSS+Jquery实现页面圆角框方法大全
- JS+CSS实现可拖拽的漂亮圆角特效弹出层完整实例
- jQuery+html5+css3实现圆角无刷新表单带输入验证功能代码
- js+css实现的圆角边框TAB选项卡滑动门代码分享(2款)
- JS+CSS实现自适应选项卡宽度的圆角滑动门效果
- JS+CSS实现的经典圆角下拉菜单效果代码
- CSS 使用Sprites技术实现圆角效果