小白css基础学习记之精灵图

CSS精灵技术

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

下面是精灵技术的相关介绍：
1.主要针对于背景图片使用，就是把多个小背景图片整合到一张大图片中（以LOL官网为列，见图一和图二）。
2.这个大图片也称为sprites 精灵图或者雪碧图
3.移动背景图片位置，此时可以使用 background-position：x轴数值 y轴数值；
4.移动的距离就是这个目标图片的X轴和 Y轴，注意网页中的坐标与数学上的坐标方向有所不同
5.因为一般情况下都是往上往左移动，所以数值都是负值
6.使用精灵图的时候需要精确测量每个小背景图片的大小和位置*/

图一

图二

接下来是一个精灵图的小练习：
这是王者荣耀官网的精灵图，接下来实现图中的两个小图标的显示。

先创建两个盒子：

<body><div class="box1"></div><div class="box2"></div>
</body>

然后用CSS实现显示：

 <style>    .box1 {width: 60px;height: 60px;margin: 100px auto;/*移动图片位置*//* background-position: -182px 0; *//* 复合写法 */background: url("../pink_css_study/img/sprites.png") no-repeat -182px 0;}.box2 {width: 27px;height: 27px;margin: 200px;background: url("../pink_css_study/img/sprites.png") no-repeat -155px -106px;}</style>

效果图：

小白css基础学习记之精灵图相关推荐

前端——CSS基础学习【part 2】
前端--CSS基础学习[part 2] Emmet CSS的复合选择器 CSS的元素显示模式 CSS的背景 CSS的三大特性 CSS 盒子模型 Emmet 快速生成HTML结构语法 (1)生成标签,输 ...
全栈学习之CSS基础学习
CSS基础学习 1. CSS导入方式行内样式内部样式外部样式 2. 三种基本选择器 2.1 标签选择器 2.2 类选择器 2.3 id选择器 2.4 关联 3. 层次选择器 3.1 后代选择器 ...
小白零基础学习Java编程好学吗?
Java作为一门基础性编程语言,伴随着IT行业的兴起.目前,学习Java的人变得越来越多,但是想要学好Java通过自学可没有那么容易,尤其是对于初学者而言.那么小白零基础学习Java编程好学吗? IT ...
CSS基础学习-背景、边框的学习
CSS基础学习-背景.边框的学习背景属性属性描述 background 简写属性,作用是将背景属性设置在一个声明中. background-attachment 背景图像是否固定或者随着页面的其 ...
CSS基础学习--6 CSS Text（文本）
一.文本颜色 color:red; 颜色属性被用来设置文字的颜色. 颜色是通过CSS最经常的指定: 十六进制值 - 如: #FF0000 一个RGB值 - 如: RGB(255,0,0) 颜色的名称 ...
CSS基础学习--17 布局 - 水平垂直对齐
一.元素居中对齐要水平居中对齐一个元素(如 <div>), 可以使用 margin: auto;.设置到元素的宽度将防止它溢出到容器的边缘.元素通过指定宽度,并将两边的空外边距平均分配: ...
CSS基础学习--16 Float(浮动)
一.定义 CSS 的 Float(浮动),会使元素向左或向右移动,其周围的元素也会重新排列. Float(浮动),往往是用于图像,但它在布局时一样非常有用. 元素的水平方向浮动,意味着元素只能左右移动 ...
css补充（1）：css实现小三角，精灵图，字体图标
文章目录一.css实现小三角 1.1 三角形实现二.精灵图的使用三.字体图标一.css实现小三角 1.1 三角形实现 html: <div class="sanjiao&quo ...
在慕课上学习的，HTML和CSS基础学习笔记1
// 在此之前,看了一遍慕课上的HTML和CSS基础教程,还有就是上过大约一周的前端课.但是学习时间不集中,不够清晰. // 现在打算专心学习,重新开始学习:复习一遍慕课上的基础教程,再看一遍Head ...

小白css基础学习记之精灵图

CSS精灵技术

小白css基础学习记之精灵图相关推荐

最新文章

热门文章