千锋教育-做有情怀、有良心、有品质的职业教育机构

400-811-9990
手机站
千锋教育

千锋学习站 | 随时随地免费学

千锋教育

扫一扫进入千锋手机站

领取全套视频
千锋教育

关注千锋学习站小程序
随时随地免费学习课程

上海
  • 北京
  • 郑州
  • 武汉
  • 成都
  • 西安
  • 沈阳
  • 广州
  • 南京
  • 深圳
  • 大连
  • 青岛
  • 杭州
  • 重庆
当前位置:哈尔滨千锋IT培训  >  技术干货  >  什么是CSS精灵图?

什么是CSS精灵图?

来源:千锋教育
发布人:qyf
时间:2023-02-08 16:57:50

  我们学习CSS背景的应用——CSS 精灵图。

  什么是精灵图呢?先来看一个案例——在这个页面中,使用到了各种各样的小图片。

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

图片 1

  最重要的是,每张图片的显示,都是由浏览器发送请求,通过互联网,服务器接收到请求后,再通过互联网,返回请求内容。如果一个页面里有上百张图片,哪怕是很小的图标,都需要经历一次这样的过程。毋庸置疑,因为请求网络资源过于频繁,整个页面的加载速度就会变慢。

  此时,我们就可以使用精灵图技术来解决这个问题了!

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

图片 2

图片 3

  例如,页面中有一个元素,使用 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 元素。

图片 5

  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;

  }

声明:本站稿件版权均属千锋教育所有,未经许可不得擅自转载。

猜你喜欢LIKE

抖音买1000粉会封吗?那些短视频运营你不得不知道的事情

2023-04-20

做短视频你不得不知道的事情之抖音流量池分配规则

2023-04-20

视频剪辑软件哪个好?电脑软件vs手机软件

2023-03-01

最新文章NEW

抖音发日常和作品有什么不一样

2023-04-19

mysql和mariadb有什么区别

2023-03-17

CSS选择器的权重如何判断?

2023-02-10

相关推荐HOT

更多>>

快速通道 更多>>

最新开班信息 更多>>

网友热搜 更多>>