html 中精灵图使用

为什么需要精灵图？

一个网页中往往会应用很多小的背景图像作为修饰,当网页中的图像过多时,服务器就会频繁地接收和发送请求图片,造成服务器请求压力过大,这将大大降低页面的加载速度。
因此,为了有效地减少服务器接收和发送请求的次数,提高页面的加载速度,出现了CSS精灵技术(也称 CSS Sprites、CSS 雪碧)。
核心原理:将网页中的一-些小背景图像整合到一张大图中,这样服务器只需要一次请求就可以了。

精灵图（sprites）的使用：

使用精灵图核心：

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

2这个大图片也成为sprites 精灵图或雪碧图

3移动背景图片位置，此时可以使用background-position

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

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

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

<!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>.box1 {width: 60px;height: 60px;background-color: pink;margin: 50px auto;background: url(images/sprites.png) no-repeat -182px 0;}.box2 {width: 27px;height: 27px;background-color: aquamarine;margin: 100px;background: url(images/sprites.png) no-repeat -155px -106px;}</style></head><body><div class="box1"></div><div class="box2"></div></body></html>

案例：拼出自己的名字

<!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;background: url(images/abcd.jpg) no-repeat}.h {width: 45px;height: 55px;background-position: -38px -70px;}.y1 {width: 44px;height: 54px;background-position: -211px -202px;}.y2 {width: 44px;height: 54px;background-position: -211px -202px;}</style></head><body><span class="h"></span><span class="y1"></span><span class="y2"></span></body></html>

html 中精灵图使用相关推荐

html中精灵图片路径,css中精灵图是什么意思？
css中精灵图是什么意思?有什么用?下面本篇文章就来给大家介绍一下CSS 精灵图.有一定的参考价值,有需要的朋友可以参考一下,希望对大家有所帮助. css中精灵图是什么意思? css精灵图(sprit ...
html中精灵图的使用方法,关于CSS Sprites、CSS精灵的详细解析
原标题:关于CSS Sprites.CSS精灵的详细解析 CSS Sprites简介 Css sprites 可翻译为css精灵,也有人翻译为css雪碧,因为sprite也有雪碧的意思.在国内习惯成他 ...
一文搞懂css中精灵图如何使用
文章目录前言一.精灵图是什么? 1.概念: 2.图片示例: 二.为什么使用精灵图? 1.用户体验而言: 2.就开发者而言: 3.就服务器而言: 三.怎样使用精灵图 1.background-pos ...
html中精灵图的使用方法,css sprites（精灵图）如何使用？
CSS Sprites是一种性能优化技术,一种网页图片应用处理方式:将多个图像组合成单个图像文件以在网站上使用的方法,以提高性能:也被称为css 精灵图. 网页通常包含多个图像.这些包括图标,按钮,徽 ...
CSS中精灵图的使用
1.精灵图的用途为了有效地减少服务器接收和请求的次数,提高网页的加载速度,因此产生了CSS精灵技术(也称CSS Sprites.CSS雪碧) 原理:把网页中的一些背景图片整合到一张图片文件中, 用b ...
CSS精灵图、字体图标
精灵图.字体图标文章目录精灵图.字体图标精灵图原理代码字体图标使用流程 1.下载兼容性字体文件包到本地 2.把字体文件包引入到html页面中精灵图一个页面上可能有很多小图标,每个图标 ...
精灵图超好用在线切图工具
网址:http://www.spritecow.com/ 把精灵图上传,然后选中自己想要的图标,复制下面的代码(记住改url为自己项目中精灵图的路径)
html精灵图坐标如何确定,如何使用HTML中的精灵图
在我们进行网页布局的时候经常会遇到以下的情况一排或多排文字上/下/左/右会有对应的小图标或图片,比如下图, 1.png 如果一张图片一张图片的去引入,不仅费时费力,还费资源. 那这个时候该如何去快速 ...
CSS中背景颜色、背景图片、渐变色、背景定位、精灵图（雪碧图）介绍
背景background: 背景可以设置为颜色和图片,设置为图片时,可以对图片继续设置. background-color:设置背景颜色: 其颜色的取值方式前面提到过,和color的取值一样,但是默认 ...

html 中精灵图使用

html 中精灵图使用相关推荐

最新文章

热门文章