css学习6：背景

十四、背景

1. 背景颜色

`background-color: 颜色色值;`

2. 背景图片

（1）背景图

- `background-image: url(路径);`

- 路径可以是绝对路径或者相对路径,注意外部 css 的路径

- 背景图必须要求元素具有宽度和高度

.bg {
	width: 100%;
	height: 500px;
	background-image: url(./img/xz-login/regist.png);
}

（2）背景图和 img 的区别

- 尺寸角度

  - img 具有自己的尺寸，不设置宽度高度，可以直接显示 （如同照片）

  - 背景图必须设置宽度和高度 （如同打印）

- 增加内容角度

  - img 图片上不可以直接写文字，除非在 img 盒子外部定位

  - 背景图是可以在图片上写文字的，背景图其实和颜色一样

- 功能角度

  - img 一般用于产品展示，可以根据素材更新

  - 背景图一般左大背景或者更新小图标 icon

3. 背景图平铺

- `background-repeat:repeat;` 默认值 横向纵向都

- `background-repeat:no-repeat;` 不平铺

- `background-repeat:repeat-x;` x 轴平铺

- `background-repeat:repeat-y;` y 轴平铺

4. 背景图定位

- `background-position`可以改变背景图的默认的位置，默认位置在元素的左上角。

- 调整背景图在元素中的位置，有 2 个方向：x 轴方向和 y 轴方向。

  - `background-position:x轴 y轴` 两个方向

  - `background-position-x` 单独定义 x 轴

  - `background-position-y` 单独定义 y 轴

- `background-position`取值

  - 可以使用长度单位，如：px、pt、em、%等

  - 关键字：top、bottom、center、right、left

  - 取值可以为正值和负值，正值向右移动负值向左移动

每张图片的显示是先由浏览器发送请求，然后服务器接受请求，返回请求内容。如果一个页面有上百张图片，哪怕是很小的图标，都需要经历一次这样的过程。那么，毋庸置疑，肯定会由于请求数量的增加让整个页面的加载速度降低。正应为如此，精灵图（sprite）应运而生，图片整合技术，将大量的小图标整合到一张图，从而减少服务器接收和发送请求的次数，提高页面的加载速度。

【练习】精灵图

> 从素材精灵图 68*56 中随意选取三个小精灵分别显示在三个 div 中作为背景

> 利用图片定位做，一个小精灵图片位置为 68*56，通过数字进行查找，宽度为 68 的倍数，高度为 56 的倍数

div {
	width: 68px;
	height: 56px;
	border: 1px solid black;
	background-image: url(./img/精灵图68x56.png);
	background-repeat: no-repeat;
}
.d1 {
	background-position: -68px -112px;
}
.d2 {
	background-position: -612px 0;
}
.d3 {
	background-position: -204px -280px;
}

【练习】

> 使用背景图定位将小图片定位在输入框里

input {
	width: 200px;
	height: 26px;
	background-image: url(./img/xz-login/yhm.png);
	background-repeat: no-repeat;
	background-position: right;
}

5. 背景图尺寸

- `background-size`属性来控制背景图片的大小.在拉伸方向中有宽度拉伸和高度拉伸两种，所以可以指定两个值`background-size:x轴拉伸 y轴拉伸;`

- 取值

  - 取 1 个值，这个值指定图片的宽度，图片的高度隐式的为 auto

  - 尺寸可以为 px、pt、em、%

  - cover:铺满整个容器的宽高，而图片多出的部分则会被裁掉；

  - contain:容器内至少有一张完整的图，no-repeat 情况下容器会有留白区域。repeat 情况下留白区域则平铺背景图

6. 背景的简写方式

- `background:color image repeat position;`简写属性，四组值用空格分开,没有顺序

- background 简写中不包括`background-size`，`size`需要单独写

- background 最简写法可以是 background：color 或者 background：url，其他不可以

- 简写的弊端：简写的方式会覆盖上边定义好的