11-1(2)-CSS 背景+CSS 精灵图

个人主页：学习前端的小z
个人专栏：HTML5和CSS3悦读
本专栏旨在分享记录每日学习的前端知识和学习笔记的归纳总结，欢迎大家在评论区交流讨论！

文章目录

一、CSS 背景
二、CSS 精灵图

一、CSS 背景

通过 CSS 背景属性，可以给页面元素添加背景样式。

背景属性可以设置背景颜色、背景图片、背景平铺、背景图片位置、背景图像固定等。

1 背景颜色

background-color 属性定义了元素的背景颜色。

background-color:颜色值;

一般情况下元素背景颜色默认值是 transparent（透明），我们也可以手动指定背景颜色为透明色。

background-color:transparent;

2 背景色半透明

CSS3 为我们提供了背景颜色半透明的效果。

background-color: rgba(0, 0, 0, 0.3);

最后一个参数是 alpha 透明度，取值范围在 0~1之间
我们习惯把 0.3 的 0 省略掉，写为 background: rgba(0, 0, 0, .3);
注意：背景半透明是指盒子背景半透明，盒子里面的内容不受影响

3 背景图片

background-image 属性描述了元素的背景图像。实际开发常见于 logo 或者一些装饰性的小图片或者是超大的背景图片, 优点是非常便于控制位置. (精灵图也是一种运用场景)

background-image : none | url (url)

取值：

值	说明
url(‘URL’)	图像的URL
none	无图像背景会显示。这是默认

注意：背景图片后面的地址，千万不要忘记加 URL，在css文件或者style标签里面尽量加引号，行内样式里面的路径不要加引号。

4 背景平铺

如果需要在 HTML 页面上对背景图像进行平铺，可以使用 background-repeat 属性。

background-repeat: repeat | no-repeat | repeat-x | repeat-y

取值：

值	说明
repeat	背景图像将向垂直和水平方向重复。这是默认
repeat-x	只有水平位置会重复背景图像
repeat-y	只有垂直位置会重复背景图像
no-repeat	background-image 不会重复

5 背景图片位置

利用 background-position 属性可以改变图片在背景中的位置。

background-position: x y;

参数代表的意思是：x 坐标和 y 坐标。可以使用 方位名词 或者 精确单位

值	描述
left、right、center top、bottom、center	如果仅指定一个关键字，其他值将会是"center"
x% y%	第一个值是水平位置，第二个值是垂直。左上角是0％0％。右下角是100％100％。如果仅指定了一个值，其他值将是50％。。默认值为：0％0％
xpos ypos	第一个值是水平位置，第二个值是垂直。左上角是0。单位一般是像素（0px 0px）。如果仅指定了一个值，其他值将是50％。你可以混合使用％和positions

参数是方位名词

如果指定的两个值都是方位名词，则两个值前后顺序无关，比如 left top 和 top left 效果一致
如果只指定了一个方位名词，另一个值省略，则第二个值默认居中对齐

参数是精确单位

如果参数值是精确坐标，那么第一个肯定是 x 坐标，第二个一定是 y 坐标
如果只指定一个数值，那该数值一定是 x 坐标，另一个默认垂直居中

参数是混合单位

如果指定的两个值是精确单位和方位名词混合使用，则第一个值是 x 坐标，第二个值是 y 坐标

6 背景图片大小

background-size 设置背景图片大小。

图片可以保有其原有的尺寸，或者拉伸到新的尺寸，或者在保持其原有比例的同时缩放到元素的可用空间的尺寸。

background-size: length|percentage|cover|contain;

取值：

值	描述
length	设置背景图片高度和宽度。第一个值设置宽度，第二个值设置的高度。如果只给出一个值，第二个是设置为 auto(自动)
percentage	将计算相对于背景定位区域的百分比。第一个值设置宽度，第二个值设置的高度，各个值之间以空格隔开指定高和宽，以逗号 , 隔开指定多重背景。如果只给出一个值，第二个是设置为"auto(自动)"
cover	此时会保持图像的纵横比并将图像缩放成将完全覆盖背景定位区域的最小大小。
contain	此时会保持图像的纵横比并将图像缩放成将适合背景定位区域的最大大小。

cover 和 contain 都是按图片宽高比展示，

cover - 水平或者垂直方向不满足宽高比会被剪裁，比如宽>高，那么宽会被剪裁，高就会完全呈现，反之亦然

contain - 水平或者垂直方向不满足宽高比会被留白，比如宽>高，那么水平方向就被留白，反之亦然，都会完全出来呈现

7 背景图片定位-了解

background-origin属性指定background-position属性应该是相对位置。

background-origin: padding-box|border-box|content-box;

取值：

值	描述
padding-box	背景图像填充框的相对位置，默认值
border-box	背景图像边界框的相对位置
content-box	背景图像的相对位置的内容框

8 背景图片剪切-了解

background-clip属性指定背景绘制区域。

background-clip: border-box|padding-box|content-box;

取值：

值	说明
border-box	默认值。背景绘制在边框方框内（剪切成边框方框）。
padding-box	背景绘制在衬距方框内（剪切成衬距方框）。
content-box	背景绘制在内容方框内（剪切成内容方框）。

9 背景图像固定（背景附着）-了解

background-attachment 属性设置背景图像是否固定或者随着页面的其余部分滚动。

background-attachment 后期可以制作视差滚动的效果。

主布局滚动：想要图片背景固定，加上fixed

局部滚动：想要图片背景固定，加上scroll，否则指定local随页面滚动而滚动

background-attachment : scroll | fixed

取值：

值	描述
scroll	背景图片随着页面的滚动而滚动，这是默认的。
fixed	（主布局）背景图片不会随着页面的滚动而滚动。
local	背景图片会随着元素内容的滚动而滚动。

scroll和local的区别：scroll相对于元素固定，而local是相对于元素内容固定。也就是说，在存在内部滚动条的情况下，scroll就相当于fixed，而local就相当于scroll。

当谈及background-attachment时需要考虑两种不同的观点：主视图(浏览器窗口)和局域视图(你可以在上面的演示中看到这点)。

scroll是默认值。它与主视图一起滚动，但在局域视图中保持固定。

一般用途：

如果文档比较长，那么当文档向下滚动时，背景图像也会随之滚动。当文档滚动到超过图像的位置时，图像就会消失。

您可以通过 background-attachment 属性防止这种滚动。通过这个属性，可以声明图像相对于可视区是固定的（fixed），因此不会受到滚动的影响;

background-attachment 属性的默认值是 scroll，也就是说，在默认的情况下，背景会随文档滚动。

其他：如果背景图像background-attachment是"固定"，background-origin属性没有任何效果。

10 背景复合写法

为了简化背景属性的代码，我们可以将这些属性合并简写在同一个属性 background 中。从而节约代码量。

当使用简写属性时，没有特定的书写顺序,一般习惯约定顺序为：

background: 背景颜色 背景图片地址 背景平铺 背景图像滚动 背景图片位置;
background: bg-color bg-image position/bg-size bg-repeat bg-origin bg-clip bg-attachment;
background: transparent url(image.jpg) repeat-y fixed top ;

各值之间用空格分隔，不分先后顺序。可以只有其中的某些值，例如 background：#FF0000 url(smiley.gif); 是允许的。

个人主页：学习前端的小z
个人专栏：HTML5和CSS3悦读
本专栏旨在分享记录每日学习的前端知识和学习笔记的归纳总结，欢迎大家在评论区交流讨论！

二、CSS 精灵图

1 为什么需要精灵图

一个网页中往往会应用很多小的背景图像作为修饰，当网页中的图像过多时，服务器就会频繁地接收和发送请求图片，造成服务器请求压力过大，这将大大降低页面的加载速度。

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

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

精灵技术目的：为了有效地减少服务器接收和发送请求的次数，提高页面的加载速度

百度精灵图：

在这里插入图片描述

2 精灵图（sprites）的使用

精灵技术主要针对于背景图片使用。就是把多个小背景图片整合到一张大图片中
这个大图片也称为 sprites 精灵图或者雪碧图
移动背景图片位置，此时可以使用 background-position
移动的距离就是这个目标图片的 x 和 y 坐标。注意网页中的坐标有所不同
因为一般情况下都是往上往左移动，所以数值是负值
使用精灵图的时候需要精确测量，每个小背景图片的大小和位置

3 精灵技术的使用

CSS 精灵其实是将网页中的一些背景图像整合到一张大图中（精灵图），然而，各个网页元素通常只需要精灵图中不同位置的某个小图，要想精确定位到精灵图中的某个小图，就需要使用 CSS 的 background-image、background-repeat 和 background-position 属性进行背景定位，其中最关键的是使用 background-position 属性精确地定位。

.bg-tp1 {
  width: 20px;
  height: 20px;
  background: url("css_sprites.png") -10px -10px;
}

.bg-tp2 {
  width: 20px;
  height: 20px;
  background: url("css_sprites.png") -50px -10px;
}

.bg-tp3 {
  width: 20px;
  height: 20px;
  background: url("css_sprites.png") -10px -50px;
}

.bg-tp4 {
  width: 20px;
  height: 20px;
  background: url("css_sprites.png") -50px -50px;
}