CSS——CSS精灵技术(sprite)※

简介: CSS——CSS精灵技术(sprite)※

CSS精灵技术(sprite) 小妖精 雪碧


精灵技术产生的背景



图所示为网页的请求原理图,当用户访问一个网站时,需要向服务器发送请求,网页上的每张图像都要经过一次请求才能展现给用户。


然而,一个网页中往往会应用很多小的背景图像作为修饰,当网页中的图像过多时,服务器就会频繁地接受和发送请求,这将大大降低页面的加载速度。为了有效地减少服务器接受和发送请求的次数,提高页面的加载速度,出现了CSS精灵技术(也称CSS Sprites、CSS雪碧)。


精灵技术本质


简单地说,CSS精灵是一种处理网页背景图像的方式。它将一个页面涉及到的所有零星背景图像都集中到一张大图中去,然后将大图应用于网页,这样,当用户访问该页面时,只需向服务发送一次请求,网页中的背景图像即可全部展示出来。通常情况下,这个由很多小的背景图像合成的大图被称为精灵图(雪碧图),如下图所示为京东网站中的一个精灵图。



精灵技术的使用


CSS 精灵其实是将网页中的一些背景图像整合到一张大图中(精灵图),然而,各个网页元素通常只需要精灵图中不同位置的某个小图,要想精确定位到精灵图中的某个小图,就需要使用CSS的background-image、background-repeat和background-position属性进行背景定位,其中最关键的是使用background-position属性精确地定位。


制作精灵图


CSS 精灵其实是将网页中的一些背景图像整合到一张大图中(精灵图),那我们要做的,就是把小图拼合成一张大图。


大部分情况下,精灵图都是网页美工做。


注意事项


我们精灵图上放的都是小的装饰性质的背景图片。 插入图片不能往上放。


我们精灵图的宽度取决于最宽的那个背景。


我们可以横向摆放也可以纵向摆放,但是每个图片之间,间隔至少隔开偶数像素合适。

在我们精灵图的最低端,留一片空隙,方便我们以后添加其他精灵图。


结束语:


小公司,背景图片很少的情况,没有必要使用精灵技术,维护成本太高。 如果是背景图片比较多,可以建议使用精灵技术。


精灵图案例


比如说我们要获取上图的两个小图标(图片在上文京东图标,可以右击下载)




<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
  <style>
  h3 {
    background: url(images/jd.png) no-repeat 0px -130px;
    width: 220px;
    height: 54px;
  }
  </style>
</head>
<body>
  <h3></h3>
</body>
</html>
相关文章
|
17天前
|
前端开发 JavaScript 开发者
优化CSS重置过程:探索CSS层叠技术的应用与优势
这篇文章介绍了一种名为CSS层叠的技术,用于优化CSS重置过程。它解释了CSS重置的概念,即通过删除浏览器默认样式来确保在不同浏览器上呈现一致的外观。然后,它引入了CSS层叠技术,以更好地控制样式的层次结构和优先级。
|
23天前
|
前端开发 UED
不可或缺的前端技术之CSS选择器
CSS选择器是前端开发中不可或缺的技术,它能够通过简洁而强大的语法来选择网页中的元素,并对其进行样式的设置。本文将介绍CSS选择器的基本用法和常见类型,帮助读者更好地掌握前端开发中的样式选择技巧。
|
1月前
|
前端开发 JavaScript API
2022年CSS生态圈技术趋势!(下)
2022年CSS生态圈技术趋势!(下)
|
1月前
|
前端开发 API C++
2022年CSS生态圈技术趋势!(上)
2022年CSS生态圈技术趋势!
|
2月前
|
前端开发
css sprite 的优缺点,使用方法和示例
css sprite 的优缺点,使用方法和示例
18 1
|
2月前
|
存储 前端开发 JavaScript
基于前端技术原生HTML、JS、CSS 电子病历编辑器源码
基于前端技术原生HTML、JS、CSS 电子病历编辑器源码
50 0
|
2月前
|
Web App开发 前端开发 容器
一篇文章教你学会如何使用CSS中的雪碧图(CSS Sprite)
一篇文章教你学会如何使用CSS中的雪碧图(CSS Sprite)
|
2月前
|
前端开发 安全 容器
CSS基本知识之复合选择器、元素显示模式、背景图片位置,精灵图(二)
CSS基本知识之复合选择器、元素显示模式、背景图片位置,精灵图
|
2月前
|
前端开发
CSS基本知识之复合选择器、元素显示模式、背景图片位置,精灵图(一)
CSS基本知识之复合选择器、元素显示模式、背景图片位置,精灵图
|
4月前
|
XML 前端开发 JavaScript
CSS3 技术中的数字 3 代表什么含义
CSS3 技术中的数字 3 代表什么含义
54 1

相关产品

  • 云迁移中心