源码网商城,靠谱的源码在线交易网站 我的订单 购物车 帮助

源码网商城

css Sprites小实例代码

  • 时间:2020-06-05 07:21 编辑: 来源: 阅读:
  • 扫一扫,手机访问
摘要:css Sprites小实例代码
[img]http://files.jb51.net/upload/20080529194637985.gif[/img] 这是一个很简单的应用,不过在设计中,这样做可以减轻服务器的压力,是请求次数减少,是一个不错的方法。 特别要说明的是,在这种小图片上即使是两张图片其实就响应时间来说也慢不了多少,不过有一个问题,就是两张图片交替时容易出现背景图片从新加载而导致很段时间不显示的效果。(时间长短视服务器的响应速度和图片大小而变化) 下面是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)
联系客服
客服电话:
400-000-3129
微信版

扫一扫进微信版
返回顶部