介绍
这篇文章将为大家详细讲解有关CSS怎么实现精灵图与字体图标,小编觉得挺实用的,因此分享给大家做个参考,希望大家阅读完这篇文章后可以有所收获。
<强>精灵图:
在以前,每个图片资源都是独立的一张张图片,浏览器访问网站中的不同网页时是重复获取这一张张图片的,这代表需要访问很多次资源。
为了减少资源的访问次数,将多个常用的图片集合到一张图片中(网页的缓存机制是会略去本地已经有的资源,如果前一次获取到了这个资源,那么后面不会再访问了,直到缓存的资源失效了。
将多个常用的图片集合到一张图片中之后,把这个图设置成背景图片,然后利用背景位置来显示图片的不同部分。
<强>示例:
下面是一张26字母表,我们利用这张图来拼出一个谷歌
& lt; ! DOCTYPE html>
& lt; html>
& lt; head>
,,,& lt; meta charset=癠TF-8",/比;
,,,& lt; title> Document
,,,& lt; style>
,,,,,,,div {
,,,,,,,,,,,显示:inline-block;
,,,,,,,}
,,,,,,,div:第一个孩子{
,,,,,,,,,,,宽度:79 px;
,,,,,,,,,,,身高:,79 px;
,,,,,,,,,,,背景图片:url (& # 39; abcd.jpg& # 39;);
,,,,,,,,,,,背景位置:-396 px 0;
,,,,,,,}
,,,,,,,div: nth-child (2) {
,,,,,,,,,,,宽度:82 px;
,,,,,,,,,,,身高:,82 px;
,,,,,,,,,,,背景图片:url (& # 39; abcd.jpg& # 39;);
,,,,,,,,,,,背景位置:-326 px -98 px;
,,,,,,,}
,,,,,,,div: nth-child (3) {
,,,,,,,,,,,宽度:82 px;
,,,,,,,,,,,身高:,82 px;
,,,,,,,,,,,背景图片:url (& # 39; abcd.jpg& # 39;);
,,,,,,,,,,,背景位置:-326 px -98 px;
,,,,,,,}
,,,,,,,div: nth-child (4) {
,,,,,,,,,,,宽度:79 px;
,,,,,,,,,,,身高:,79 px;
,,,,,,,,,,,背景图片:url (& # 39; abcd.jpg& # 39;);
,,,,,,,,,,,背景位置:-396 px 0;
,,,,,,,}
,,,,,,,div: nth-child (5) {
,,,,,,,,,,,宽度:48 px;
,,,,,,,,,,,身高:,77 px;
,,,,,,,,,,,背景图片:url (& # 39; abcd.jpg& # 39;);
,,,,,,,,,,,背景位置:-81 px -101 px;
,,,,,,,}
,,,,,,,div: nth-child (6) {
,,,,,,,,,,,宽度:48 px;
,,,,,,,,,,,身高:,77 px;
,,,,,,,,,,,背景图片:url (& # 39; abcd.jpg& # 39;);
,,,,,,,,,,,背景位置:-286 px 0;
,,,,,,,}
,,,& lt;/style>
& lt;/head>
& lt; body>
,,,& lt; div> & lt;/div>
,,,& lt; div> & lt;/div>
,,,& lt; div> & lt;/div>
,,,& lt; div> & lt;/div>
,,,& lt; div> & lt;/div>
,,,& lt; div> & lt;/div>
& lt;/body>
& lt;/html> 结果:
如上例所示,我们可以把多张图片放到一张大图中,然后利用背景位置就可以截取出我们想要看到的内容。
在现实中很多的背景图片都使用了这种技术。null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
