一篇文章教你学会如何使用CSS中的雪碧图（CSS Sprite）

一、什么是雪碧图？

雪碧图（CSS Sprite）又叫CSS精灵图，是一种网页图片应用处理方式，他允许你将一个页面设计到所有零星图片都包含到一张大图中去，这样一来，当访问该页面时，由从前的多次请求变为一次请求，客户端显示一张图片都会向服务器发送请求，所以图片请求越多，造成延迟的可能性就越大，当页面有许多字体图标时，推荐使用CSS Sprite 。

想必大家都用过雪碧图吧，话不多说，看看雪碧图是啥玩意儿：

看看金立官网的雪碧图：

二、那么，使用雪碧图（CSS Sprite）有哪些优点呢

减少图片的字节数。
减少了网页的HTTP请求，从而大大提高了页面的性能。
解决了网页设计师在图片命名上的困扰，只需要对一张集合的图片的命名就可以了不需要对每一个小元素进行命名，从而提高了网页的制作效率。

三、如何使用雪碧图（CSS Sprite）

（1）需要一个设置好宽和高的容器

（2）通过background-image引入背景图片，注意：图片可以撑开容器，但背景图片不能撑开容器,所以一定要设置宽高。

（3）通过background-position：x,y;（X和Y一般都取负值）把图片背景移动到自己需要的位置,当只取一个值的时候，第二个值默认居中。

四、如何调试

可以通过浏览器自带的调试工具进行调试（如chrome浏览器按F12)即可进行调试，慢慢移动背景background-position的值来达到理想的效果。

五、沙场练兵
我就拿金立的那张图来做个案例吧

PS：前期做的时候先设置大概的宽度，实在不行就打开调试工具，感觉也挺方便的

一篇文章教你学会如何使用CSS中的雪碧图（CSS Sprite）相关推荐

一篇文章教你学会使用SpringBatch 监听器Listener
文章目录一.SpringBatch监听器二.搭建SpringBatch开发环境三.监听器详细介绍 1.JobExecutionListener 2.StepExecutionListener 3 ...
一篇文章教你学会使用SpringBoot实现文件上传和下载
文章目录一.搭建SpringBoot开发环境 1.创建项目 2.配置application.properties参数 3.实体响应类和异常信息类 4.创建FileController 二.接口测试 ...
一篇文章教你学会实现模糊搜索结果的关键词高亮显示
一篇文章教你学会实现模糊搜索结果的关键词高亮显示话不多说,先看效果图: 代码如下: <!DOCTYPE html> <html lang="en">< ...
雪碧图 css 使用方式与 Js使用方式
效果链接示例雪碧图如下,雪碧图图片资源来源于力扣官网中头像悬浮Dark Side功能. 雪碧图分析:该雪碧图横向为12等分,高度32px 1. JavaScript方式使用雪碧图(猜测力扣使用的方式 ...
JAVA自动生成雪碧图sprites和样式CSS文件（包含原始图标CSS、雪碧图CSS）
在项目的开发过程中,如果一个页面有很多的小图标展现.浏览器展示页面时会向后台服务器发送很多的请求获取对应的图片,这样既浪费资源,也使得页面的加载变得很慢,影响客户的体验.此时我们可以采用将这些小图标放 ...
No.006 雪碧图CSS Sprite
雪碧图CSS Sprite 1. 名称由来 2. 使用目的 3. 实现注意 (以下所有内容仅用以记录学习过程中的个人理解,如有错误欢迎指出) 1. 名称由来为什么叫雪碧图呢?因为常喝的雪碧的英文名称 ...
【无标浮动特性应用实例】二、CSS 精灵（雪碧图、精灵图）三、滑动门四CSS 定位{相对定位}
[无标浮动特性应用实例] 总结:浮动脱离文档流不脱离文本流 - 最初只用于在成块的文本内浮动图像为图片和文字之间的对齐方式是基线对齐要想图文环绕需要给图片设置浮动应用实例-两列自适应实现要点 ...
html css雪碧图,css常见小技巧（雪碧图）
1.CSS Sprite(雪碧图|精灵图)指什么? 有什么作用 CSS雪碧即CSS Sprite,也有人叫它CSS精灵,是一种CSS图像合并技术,该方法是将小图标和背景图像合并到一张图片上,然后利用 ...
html css雪碧图,css sprite css雪碧图生成工具
什么是css sprite CSS sprite在国内很多人叫css精灵,是一种网页图片应用处理方式.它允许你将一个页面涉及到的所有零星图片都包含到一张大图中去,这样一来,当访问该页面时,载入的图片就 ...

一篇文章教你学会如何使用CSS中的雪碧图（CSS Sprite）

一篇文章教你学会如何使用CSS中的雪碧图（CSS Sprite）

一篇文章教你学会如何使用CSS中的雪碧图（CSS Sprite）相关推荐

最新文章

热门文章