1.精灵图的用途

为了有效地减少服务器接收和请求的次数，提高网页的加载速度，因此产生了CSS精灵技术（也称CSS Sprites、CSS雪碧）

核心原理：将网页中的一些小背景图像整合到一张大图中，这样服务器只要一次请求就可以了

2. 精灵图（sprites）的使用

2.1 原理

使用精灵图核心：

精灵技术主要针对背景图片使用。就是把多个小背景图片整合到一张大图片中

这个大图片也称sprites精灵图或者雪碧图

移动背景图位置，此时可以background-position

移动的距离就是这个目标图片的x和y坐标。注意网页中的坐标有所不同

一般情况下往上往左移动，所以数值都是负值

使用精灵图的时候需要精确测量，每个小背景图片的大小和位置

2.2 总结

精灵图主要是针对于小的背景图片的使用

主要借助背景位置来实现---background-position

精灵图的数值大多数是负值（左负，右正，上负，下正）

精灵图的缺点：

图片文件比较大

图片本身放大和缩小会失真

一旦图片制作完就很难更换

3. 案例：用精灵图拼出名字

3.1 效果图

3.2 代码

<!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>用精灵图拼出名字</title><style>span {display: inline-block;margin: 100px auto;margin-right: 20px;}.l {width: 105px;height: 120px;background: url(images/abcd.jpg) no-repeat 0px -270px;}.i {width: 62px;height: 117px;/* margin: 100px 120px; */background: url(images/abcd.jpg) no-repeat -325px -135px;}.s {width: 122px;height: 118px;/* margin: 100px 140px; */background: url(images/abcd.jpg) no-repeat -247px -415px;}.a {width: 112px;height: 118px;/* margin: 100px 160px; */background: url(images/abcd.jpg) no-repeat 0px 0px;}</style>
</head><body><span class="l"></span><span class="i"></span><span class="s"></span><span class="a"></span>
</body></html>

26字母图如下

css进阶：精灵图的使用、实现用精灵图拼出名字相关推荐

【CSS进阶】精灵图、字体图标、用户界面样式、常见布局技巧、初始化、CSS三角
该系列文章是博主学习前端入门课程的笔记,同时也为了方便查阅,有任何问题都欢迎在评论区提出.本文主要介绍精灵图.字体图标.CSS三角.用户界面样式.vertical-align.常见布局技巧.初始化思 ...
003day （css文本、列表、背景相关属性，精灵图的制作）
一.css文本相关属性 1.字体的颜色也可以转换为16进制的颜色(可以直接百度搜索16进制颜色表)和rgb属性的颜色.例如:red=#b0b0b0=rgb(211,176,33). 一共三种表现形式像 ...
《Web前端开发精品课 HTML与CSS进阶教程》——1.4　id和class
本节书摘来自异步社区<Web前端开发精品课 HTML与CSS进阶教程>一书中的第1章,第1.4节,作者: 莫振杰更多章节内容可以访问云栖社区"异步社区"公众号查看. ...
React学习资料+css进阶资料总结
# Awesome ## 最佳实践 * [React + Redux 最佳实践](https://github.com/sorrycc/blog/issues/1) * [Redux 最佳实践-译]( ...
CSS进阶之关于网格布局(Grid) 你了解哪些
CSS 进阶:网格布局(Grid)及其基本属性网格布局(Grid)是最强大的 CSS 布局方案.起初我也认为 flex 布局就可以完成绝大部分布局场景,但谁不希望用更直观.更简洁的方式来布局自己的网 ...
前端css基础知识点之sprite——雪碧（精灵）
前端css基础知识点之sprite--雪碧(精灵) css sprite css精灵或css雪碧把网页中一些背景图片整合到一个大文件中,然后利用 background-image.backgroun ...
【CSS进阶】CSS 颜色体系详解
说到 CSS 颜色,相比大家都不会陌生,本文是我个人对 CSS 颜色体系的一个系统总结与学习,分享给大家. 先用一张图直观的感受一下与 CSS 颜色相关大概覆盖了哪些内容. 接下来的行文内容大概会按照 ...
CSS进阶（7）—— 内联元素的掌管者line-height和vertical-align（上）
在CSS世界中,块级元素一般负责结构,而内联元素则负责文字内容,而CSS设计的初衷就是面向图文混合排版,因此内联元素在CSS世界中有着非常重要的地位.由于本章内容较多,因此特分为上下两章,依旧可以根据 ...
(11/24) css进阶：Less文件的打包和分离
(11/24) css进阶:Less文件的打包和分离写在前面:在前面我们对css打包和分离进行了描述.此节我们开始学习如何对less文件进行打包和分离. Less 是一门 CSS 预处理语言,它扩展 ...

css进阶：精灵图的使用、实现用精灵图拼出名字

1.精灵图的用途

2. 精灵图（sprites）的使用

2.1 原理

2.2 总结

3. 案例：用精灵图拼出名字

3.1 效果图

3.2 代码

css进阶：精灵图的使用、实现用精灵图拼出名字相关推荐

最新文章

热门文章