繁體中文当前位置: 首页 > 图文教程 > 网页制作 > CSS样式表 > css Sprites小实例代码
- CSS样式表
- CSS 表单元素不继承body的字体属性
- 网页制作学习教程 CSS Position
- 网页设计学习教程 CSS盒模型
- vertical-align 表单元素垂直对齐的解决方法
- 不用Cookie的仿刷新二级高亮菜单
- CSS3 优势以及网页设计师如何使用CSS3技术
- CSS 网页制作 提高CSS可阅读性
- CSS 样式表中引用图片地址在各浏览器中的差异
- CSS Sprite优化 减少HTTP链接数
- 网页制作中应用的50个CSS技巧(国外)
- CSS 英文教程 CSS语法
- CSS 网页文字渐变效果
- 纯css 圆角实现代码
- CSS 新的图像替换方法
- 不必需的样式脚本文件导致页面不能及时更新
- CSS 约定写法 利用扩展
- 最全的CSS浏览器兼容问题小结
- CSS 网页图文混排的10个技巧
- IE的CSS制作网页技巧3则
- 创造100% 自适应css布局的行之有效的方法
CSS样式表 中的 css Sprites小实例代码
出处:互联网 整理: 软晨网（RuanChen.com） 发布: 2009-10-12 浏览: 155 ::
收藏到网摘: 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
