CSS Sprites怎么用
这篇文章主要介绍“CSS Sprites怎么用”,在日常操作中,相信很多人在CSS Sprites怎么用问题上存在疑惑,小编查阅了各式资料,整理出简单好用的操作方法,希望对大家解答”CSS Sprites怎么用”的疑惑有所帮助!接下来,请跟着小编一起来学习吧!
为什么要使用Sprites(精灵图)?
网页通常包含多个图像。这些包括图标,按钮,徽标,相关图片和其他图形。当页面中加载图像时,浏览器向服务器发出HTTP请求。分别加载每个图像需要多次调用HTTP服务器,这可能导致下载时间变慢以及带宽使用率过高。
CSSSprites会将多个图像组合成一个称为精灵表或拼贴图的单个图像,用户不下载多个文件,而是下载单个文件并通过偏移文件显示必要的图像(或精灵图)。
这样可以减少对服务器的调用、减少呈现网页所需的下载次数,节省带宽并缩短用户端的下载时间,减少网络拥塞。
如何使用CSSSprites(精灵图)?
因为CSSSprites是一张多个图像组合成单个图像,在精灵表中多个图像会被放置在网格状图案里,呈现网状分布。
当需要特定图像(精灵图)时,一般会通过CSSbackground-images属性引用精灵表,在通过CSSbackground-position属性对其进行偏移定位得到所需的精灵图,然后以像素为单位定义精灵图的大小。
使用Sprites(精灵图)的实例
精灵图表:
代码示例:
html代码:
<ulclass="menu">
<liclass="firefox"><ahref="#">Firefox</a></li>
<liclass="chrome"><ahref="#">Chrome</a></li>
<liclass="ie"><ahref="#">Explorer</a></li>
<liclass="opera"><ahref="#">Opera</a></li>
<liclass="safari"><ahref="#">Safari</a></li>
</ul>
css代码:
ul.menu{
list-style-type:none;
width:400px;
}
ul.menuli{
padding:20px5px;
font-size:16px;
float:left;
font-family:"TrebuchetMS",Arial,sans-serif;
}
ul.menulia{
height:50px;
line-height:50px;
display:inline-block;
padding-left:60px;
color:#3E789F;
background:url(Sprites.png)no-repeat;
}
ul.menuli.firefoxa{
background-position:00;
}
ul.menuli.chromea{
background-position:0-100px;
}
ul.menuli.iea{
background-position:0-200px;
}
ul.menuli.safaria{
background-position:0-300px;
}
ul.menuli.operaa{
background-position:0-400px;
}
ul.menuli.firefoxa:hover{
background-position:0-50px;
}
ul.menuli.chromea:hover{
background-position:0-150px;
}
ul.menuli.iea:hover{
background-position:0-250px;
}
ul.menuli.safaria:hover{
background-position:0-350px;
}
ul.menuli.operaa:hover{
background-position:0-450px;
}
到此,关于“CSS Sprites怎么用”的学习就结束了,希望能够解决大家的疑惑。理论与实践的搭配能更好的帮助大家学习,快去试试吧!若想继续学习更多相关知识,请继续关注编程网网站,小编会继续努力为大家带来更多实用的文章!
免责声明:
① 本站未注明“稿件来源”的信息均来自网络整理。其文字、图片和音视频稿件的所属权归原作者所有。本站收集整理出于非商业性的教育和科研之目的,并不意味着本站赞同其观点或证实其内容的真实性。仅作为临时的测试数据,供内部测试之用。本站并未授权任何人以任何方式主动获取本站任何信息。
② 本站未注明“稿件来源”的临时测试数据将在测试完成后最终做删除处理。有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341