三分钟学会如何使用css雪碧图（Sprite）

2024-05-21 11:44:21

一. 先分析一下名字（有没有人跟我一开始一样疑惑为啥叫这名）

Sprite 英文小精灵的意思，Sprite又叫小精灵图，恰好呢某绿瓶气泡水名也叫sprite，狠狠地撞名-_-||，所以咱也就习惯的叫它雪碧图了。

二. 雪碧图的用途

雪碧图是一种网页图片处理方式。我们制作一张网页往往需要用到很多的图片，如果都用img导入，每张图片都需要向服务器发送请求，图片多了，服务器的负担就大了，用户使用过程中延迟也会增加。雪碧图通过将小图片整合在一张大图中，这样访问页面时大大减少了向服务器发送请求的次数。往下↓看

有这样的

还有这样的

三. 如何使用雪碧图

首先我们先要了解雪碧图的使用是通过调整窗口视角的位置来显示大图中不同的小图案

1 准备一个“窗口” （需要设置宽高雪碧图作为背景图无法独立撑起容器）

2 在style样式中选中窗口并通过background-image导入背景图（雪碧图）

3 通过属性background-position：x y;来调整雪碧图的位置使窗口显示出不同的图案。x和y中间用空格隔开否则无法正常显示。原点为（0 0）x取负值表示向右，y取负值表示向下，负的越多偏移越大

四.演示

.p1 {width: 24px;height: 24px;margin: 0px 28px;background-image: url(../ToolsIcon.png);float: left;}.p2 {width: 24px;height: 24px;float: left;margin: 0px 28px;background-image: url(../ToolsIcon.png);background-position: 0px -70px;}.p3 {width: 24px;height: 24px;float: left;margin: 0px 28px;background-image: url(../ToolsIcon.png);background-position: 0px -140px;}

上述演示中雪碧图图像间隔为70px，通过background-position来不断调节显示的图像

over！有帮到您的希望点赞关注转发三连一发

三分钟学会如何使用css雪碧图（Sprite）相关推荐

CSS雪碧图demo（含雪碧代码）
css雪碧图demo效果图,含hover,代码附件下载sprite_demo.zip 雪碧图制作问题参考: HTML 5开发的在线雪碧图片合成工具 http://developer.51cto.com ...
css雪碧图及优缺点
[前言] 做开发的小伙伴可能经常遇到雪碧图,那么究竟什么是雪碧图呢? [简介] 官方解释: CSS雪碧图即CSS Sprite(精灵),在国内很多人叫css精灵,是一种网页图片应用处理方式.它允许你将 ...
css中雪碧图(sprite)的使用及制作方法
雪碧图(sprite)是减少请求次数的有效手段,其原理是把多张图片进行合成,使用时通过css进行定位. 1.先看一下雪碧图没有使用雪碧图时图标是这样一个个的单独文件: 合成雪碧图后是这样拼在一起的一 ...
移动端适配之雪碧图(sprite)背景图片定位
为了减少网络请求个数量,提高网站的访问速度,我们一般都会把一些小的图片合并成一张sprite图,然后根据background-position来进行定位.在web端由于是固定的大小与left .top ...
CSS雪碧图制作emoji表情包
效果图: 原理:利用雪碧图,来实现emoji表情包,减少图片请求数. 表情包转换为文字 & 文字转换为表情包维护两个对象来实现. 缺点:表情包大小由雪碧图中表情包大小控制,不能更改. htm ...
css雪碧图如何调整大小
1.通过transform: scale(0.5);来缩放,但在本身有过渡或动画时,刷新页面会有卡顿拉伸现象!不建议这样做! 2.直接调整雪碧图background-size大小例如,雪碧图规格14 ...
html css雪碧图,css常见小技巧（雪碧图）
1.CSS Sprite(雪碧图|精灵图)指什么? 有什么作用 CSS雪碧即CSS Sprite,也有人叫它CSS精灵,是一种CSS图像合并技术,该方法是将小图标和背景图像合并到一张图片上,然后利用 ...
html css雪碧图,css sprite css雪碧图生成工具
什么是css sprite CSS sprite在国内很多人叫css精灵,是一种网页图片应用处理方式.它允许你将一个页面涉及到的所有零星图片都包含到一张大图中去,这样一来,当访问该页面时,载入的图片就 ...
css雪碧图动画,CSS3动画——雪碧图的实现
前言作为一个前端的初学者,现在好像已经在nodejs上越跑越偏,之前一直崇拜的CSS3和HTML5动画,如今也好久没有管.因为之前学了好多知识点,但是没有系统的进行总结,就从这篇文章开始,对一些碎片 ...

最新文章

热门文章