乐趣区

关于前端:零基础教你学前端73CSS精灵图

咱们学习 CSS 背景的利用——CSS 精灵图。
什么是精灵图呢?先来看一个案例——在这个页面中,应用到了各种各样的小图片。

如何在页面中插入这些小图片呢?你的思维惯性,肯定是利用 img 或者 background-image 来实现。大家思考一下,如果页面中只有几个简略的图片素材,咱们能够采纳 img 元素来引入图片,可是当网站图片过多的时候,一张图片一张图片的引入,就显得不不便了。

最重要的是,每张图片的显示,都是由浏览器发送申请,通过互联网,服务器接管到申请后,再通过互联网,返回申请内容。如果一个页面里有上百张图片,哪怕是很小的图标,都须要经验一次这样的过程。毋庸置疑,因为申请网络资源过于频繁,整个页面的加载速度就会变慢。
此时,咱们就能够应用精灵图技术来解决这个问题了!

精灵图,也称雪碧图、妖怪图,基本原理就是将页面中应用到的各种图片进行分类,整齐划一的摆在一张背景通明的图片下面,通过 CSS 的背景技术实现图片的引入,从而缩小服务器发送和接管申请的次数,进步页面的加载速度。

例如,页面中有一个元素,应用 background-image 的办法,插入一张精灵图。
默认背景图片的左上角字母“a”显示在元素外部,如果想要将字母 O 显示在元素中,就要应用 background-position 属性调整背景图片的地位。

在 ps 软件中关上精灵图(ps.gaoding.com),应用圈选工具,从图片的左上角测量到字母 ”O” 的左上角,测量间隔为:程度 390px,垂直 105px。
因为背景图片整体须要向左上角挪动,所以 background-position 的值两个方向都是正数:别离为 -390px 和 -105px。此时,字母 o 曾经显示在元素外部。

如果地位测量有偏差,能够在浏览器的开发者工具中,找到页面元素,选中属性值,按下键盘的高低箭头,对属性值进行微调,地位调整称心后,依据这个值来批改款式。

兴许你会问,精灵图是前端工程师制作的吗?实际上,在团队的网站开发中,网页所须要的各种图片,UI 设计师都会为咱们筹备好,咱们间接应用即可。

接下来,咱们就应用精灵图技术,实现“千锋”拼音首字母的展现。
创立 014-sprites 文件夹,在文件夹下创立 sprites.html 文件和 sprites-style.css 文件,关上 html,构建根底代码,引入内部款式。
应用 emmet 命令:div.box$*2 疾速创立两个带有类名的 div 元素。

HTML
<div class="box1"></div>
<div class="box2"></div>

关上 css 文件,定义 div 元素选择器,申明款式:width: 50px,height: 70px,border: 2px solid gray。
先看一下成果,两个带有灰色边框,纵向排列的容器就做好了!
持续给 div 增加款式:float: left,margin: 10px。
此时,容器曾经横向显示,容器之间也有了间距。

CSS
div{
   width:50px;
   height:70px;
   border: 2px solid gray;
   float:left;
   margin:10px;
}

再定义一个 .box1 选择器,申明款式:background: url(sprites.png) no-repeat。
预览一下成果,字母“a”曾经在第一个容器中显示进去。
在 ps 中应用圈选工具,测量图片左上角到字母“q”左上角的程度间隔为 545px,垂直距离为 110px。
给 background 属性追加款式值:-545px -110px。
这样,字母“q”就显示进去了!如果对地位不称心,能够在这里微调。

CSS
.box1{background:url(sprites.png) no-repeat -545px -105px;
}

反复后面的操作。在 ps 里测量字母 f 的地位,程度方向 390px,垂直方向 20px。
再定义一个 .box2 选择器,申明款式:background: url(sprites.png) no-repeat -390px -20px;
再看一下成果,字母“f”也显示进去了。也能够微调一下地位。

CSS
.box2{background:url(sprites.png) no-repeat -386px  -14px;
}

写出本人的名字吧。大家加油!
文章配套视频链接:https://www.bilibili.com/vide…

退出移动版