繁體中文当前位置: 首页 > 图文教程 > 网页制作 > CSS样式表 > css Sprites小实例代码
- CSS样式表
- 让图片 div居中实现代码
- 去掉点击链接时周围的虚线框outline属性
- CSS 优先级 详细分析
- 广告始终定位到网页右下角 css
- superLink 让伪链接更有可用性
- CSS 模块化 实现方法
- css 选择器 介绍
- CSS 语法 学习css入门者看
- firefox 滚动条消失引起页面抖动的问题
- 纯CSS定位的固定垂直居中浮动层代码，附经典解说 《详解定位与定位应用》
- 渲染CSS选择器
- CSS 兼容问题
- css textarea 高度自适应,无滚动条
- CSS 网页表单实现鼠标悬停交互效果
- 鼠标激活显示背景色网页特效CSS代码
- CSS制作用户登录和用户注册的用户体验表单
- CSS代码 注释的3种方法
- 网页头部css代码优化实例
- IE7和IE8的兼容性问题
- CSS 网页布局网页制作技巧总结
CSS样式表 中的 css Sprites小实例代码
出处:互联网 整理: 软晨网（RuanChen.com） 发布: 2009-10-12 浏览: 181 ::
收藏到网摘: n/a
今天在蓝色理想瞎逛，看见了Realazy的教程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应用中，我们便可以解决背景图片从新加载的问题
评论 (0) All
