文章目录

精灵图sprite

简介

原理

优缺点

实例

通过精灵图实现一个导航栏

精灵图sprite

简介

CSS精灵技术（也称CSS Sprites、CSS雪碧），简单来说就是从一张有各种小图标的大图上截取下来一个小图标来使用。
正因为只要加载一张大图片，这么做能有效地减少服务器接收和请求的次数，提高网页的加载速度。

原理

（1）在span、i、div等标签中进行使用，并将精灵图设置为其背景
（2）通过background-postion:x y;属性来选择性的截取精灵图的某一部分，x表示延x轴移动的距离，y表示延y轴移动的距离，通常这两个值均取为负数，将会从上往下截取精灵图。

优缺点

（1）优点:
1. 减少http请求, 加快网页的加载速度, 提高用户体验
2.减少图片的体积, 减少字节数
3. 解决设计师图片命名的烦恼
4.更换风格方便
（2）缺点:
1. 开发时需要测量, 比较繁琐
2. 维护的时候麻烦
3. 精灵图不能随意改变大小和位置
4. 宽屏高分辨率的屏幕下, 容易出现背景断裂

实例

通过精灵图实现一个导航栏

下面是一张精灵图：

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8" /><meta http-equiv="X-UA-Compatible" content="IE=edge" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><title>Document</title><style>div {width: 500px;height: 100px;display: flex;background-color: white;justify-content: space-around;margin: 0 auto;}span {display: flex;flex-direction: column;margin-left: 8px;}a {margin-top: 8px;width: 48px;height: 48px;}span:nth-child(1) a {background-image: url(./sprite.png);background-position: 0 0;}span:nth-child(2) a {background-image: url(./sprite.png);background-position: 0 -56px;}span:nth-child(3) a {background-image: url(./sprite.png);background-position: 0 -110px;}span:nth-child(4) a {background-image: url(./sprite.png);background-position: 0 -164px;}span:nth-child(5) a {background-image: url(./sprite.png);background-position: 0 -215px;}</style></head><body><div><span><a href="#"></a><span style="margin-left: 1px">景点.玩乐</span></span><span><a href="#"></a><span>周边游</span></span><span><a href="#"></a><span>美食林</span></span><span><a href="#"></a><span>一日游</span></span><span><a href="#"></a><span style="margin-left: 1px">当地攻略</span></span></div></body>
</html>

结果：

css3：精灵图sprite的使用相关推荐

UE 某图局部展UV 图标 / CSS 精灵图(sprite) 好像
CSS精灵图(sprite) 另:字体图标三十二.精灵图&字体图标 - 简书一般美术负责展UV 程序会进行简单的展UV 比如图标 UE 截取某图局部展示在屏幕/canvas/画布中展U ...
精灵图(sprite)实现动画
精灵图(sprite)实现动画用精灵图做一个二哈奔跑的动画. 1.精灵图制作将每一帧图片按动画序列顺序放好,然后调出PhotoShop的网格,调好每一帧的位置,同一行每一帧之间的距离等距,上下两行 ...
CSS学习笔记——精灵图(sprite)
CSS学习笔记目录一.什么是精灵图? 二.精灵图的优点三.精灵图的基本用法 1.打开ps导入精灵图 2.测量字母的大小及坐标 3.效果图 4.代码实现总结一.什么是精灵图? 所谓精灵图就是图片 ...
html精灵图的hover状态,css图片精灵图标怎么使用？
css精灵图(sprite)直译为"CSS精灵",也被称为通常被解释为"CSS图像拼合"."CSS贴图定位"或"CSS图片精灵&q ...
html精灵图跟img标签,css精灵图怎么使用？
什么是css精灵图(sprite)?css精灵图怎么使用?下面本篇文章就来给大家介绍一下css精灵图的使用.有一定的参考价值,有需要的朋友可以参考一下,希望对大家有所帮助. 在了解精灵图怎么使用前,我 ...
如何在基于vue-cli的项目中，使用精灵图 css sprite
新钛云服已为您服务1236天 CSS Sprites通常被称为css精灵图,在国内也被意译为css图片整合和css贴图定位,也有人称他为雪碧图. 就是将多张比较小的图片有规则的合并成一张背景图,然后再 ...
sprite（雪碧图，也叫精灵图）
1.css sprite 中文名为雪碧图,也叫精灵图,是基于background-image和background-position 实现的显示技术就是将一个有很多图标的图片,通过控制图片显示位置 ...
Mapbox之sprite精灵图
一. sprite精灵图组成要素 1. 一张排满了小图标的.png图片 mapbox为android提供的样式有如下几种: // 街道图 public static final String MAPB ...
黑马程序员pink老师前端入门教程，零基础必看的h5(html5)+css3+移动端前端视频教程（精灵图，字体图标，技巧）
一.基础班学习路线三.CSS高级技巧 1.精灵图为什么需要精灵图sprites 精灵图使用(原理) 精灵图使用(代码) 精灵图案例-拼出自己名字 2.字体图标字体图标产生和优点字体图标下载字 ...

css3：精灵图sprite的使用

文章目录

精灵图sprite

简介

原理

优缺点

实例

通过精灵图实现一个导航栏

css3：精灵图sprite的使用相关推荐

最新文章

热门文章