实例代码如下:
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;//在这里规定从某一坐标开始显示图片}
总结:
在这种小图片上即使是两张图片其实就响应时间来说也慢不了多少,不过有一个问题,就是两张图片交替时容易出现背景图片从新加载而导致很段时间不显示的效果。
相关推荐:
利用css sprites减少图片请求
DIV+CSS背景一张整图(css sprites)
CSS Sprites技术 zt十天学会web标准(div+css)_html/css_WEB-ITnose