专业的虚拟主机、云空间、域名注册服务商
首页 >  网站源码 > CSS雪碧图是什么,具体怎么做

CSS雪碧图是什么,具体怎么做

来源:5G云网络-专业云虚拟主机、云空间、域名注册服务商 发布时间:2018-07-12 在线客服:客服专员

一,首先来了解一下什么是CSS雪碧图

  • 来看这样的一个网页

Paste_Image.png


你会发现这里面有许多的图片,但是是否真的有这个多张图片呢?
答案是否定的,整个网页的图片其实只有这样的一张

Paste_Image.png

  • 这是怎么办到的呢?
    答案就是,使用CSS雪碧图,也就是多张图片合成为一张图片,然后通过位置的偏移使其与页面元素接合在一起所制成的

  • 使用雪碧图的好处是什么?
    1.因为多图合成为了一张图,所以减少了网页图片的请求,加快了网页的加载速度;
    2.可以重复使用;


二,现学现做CSS雪碧图,让我们来一步步实现类似下面图片这样的效果吧

类似效果图

1.首先,我们需要一些小图片,可以在阿里巴巴的iconfont里面下载到这些图片

搜索图片

下载素材

2.下载完毕后打开下载的文件可以看到这些图片,为了后面的方便我将他们命名为了1,2,3,4,5,6

小图片

3.然后网上搜索一下雪碧图合成网站,个人推荐雪碧图合成,使用方式如下图:

网站使用方式

4.添加完毕点击创建后,出现下图,点击下载png格式图片就出现这个合成图的网络连接了,这样的一张多小图合成的大图就是一张雪碧图

得到链接

链接长这样

5.创建html文件,并写入一个列表代码,为了方便后面的设置,我添加了class选择器;

列表代码

6.复制前面我们得到的雪碧图网址url,添加进每一个列表li元素中,并设置其不重复以及它的尺寸为你想要的尺寸,顺便去掉列表的默认样式,得到下面这样的图;

添加雪碧图进背景

7.设置li元素的文本格式以及宽高等样式,然后添加边框,得到如下图:

设置li的样式

8.最后一步,使用前面添加的class选择器对每个li元素单独设置背景雪碧图所要显示的偏移位置,例如,第三个li元素显示是便便的图,就这样设置:

设置雪碧图偏移量


PS:设置不准偏移量的可以在开发者工具中慢慢调整;

9.最终效果图显示以及代码一览:

这样就完成了我们的雪碧图列表了


收缩

5G云在线客服