# 9.2.17  background属性(侧重点)

## 先来讲讲颜色表示法

共有三种：单词、rgb表示法、十六进制表示法

rgb:红色 绿色 蓝色 三原色\
光学显示器，每个像素都是由三原色的发光原件组成的，靠明亮度不同调成不同的颜色的。\
用逗号隔开，r、g、b的值，每个值的取值范围0\~255，一共256个值。\
如果此项的值，是255，那么就说明是纯色：

黑色：\
background-color: rgb(0,0,0);\
光学显示器，每个元件都不发光，黑色的。

白色：\
background-color: rgb(255,255,255);

颜色可以叠加，比如黄色就是红色和绿色的叠加：\
background-color: rgb(255,255,0);

再比如：\
background-color: rgb(111,222,123);\
就是红、绿、蓝三种颜色的不同比例叠加。

16进制表示法\
红色：\
background-color: #ff0000;\
所有用#开头的值，都是16进制的。\
\#ff0000：红色\
16进制表示法，也是两位两位看，看r、g、b，但是没有逗号隔开。\
ff就是10进制的255 ，00 就是10进制的0，00就是10进制的0。所以等价于rgb(255,0,0);\
怎么换算的？我们介绍一下\
我们现在看一下10进制中的基本数字（一共10个）:\
0、1、2、3、4、5、6、7、8、9

16进制中的基本数字（一共16个）:\
0、1、2、3、4、5、6、7、8、9、a、b、c、d、e、f

16进制对应表：

十进制数 十六进制数

0 0

1 1

2 2

3 3

……

10 a

11 b

12 c

13 d

14 e

15 f

16 10

17 11

18 12

19 13

……

43 2b

……

255 ff

十六进制中，13 这个数字表示什么？

表示1个16和3个1。 那就是19。 这就是位权的概念，开头这位表示多少个16，末尾这位表示多少个1。

小练习：

16进制中28等于10进制多少？

答：2\*16+8 = 40。

16进制中的2b等于10进制多少？\
答：2\*16+11 = 43。

16进制中的af等于10进制多少？\
答：10 \* 16 + 15 = 175

16进制中的ff等于10进制多少？\
答：15\*16 + 15 = 255

所以，#ff0000就等于rgb(255,0,0)

background-color: #123456;\
等价于：\
background-color: rgb(18,52,86);

所以，任何一种十六进制表示法，都能够换算成为rgb表示法。也就是说，两个表示法的颜色数量，一样。

十六进制可以简化为3位，所有#aabbcc的形式，能够简化为#abc;\
比如：

background-color:#ff0000;\
等价于\
background-color:#f00;

比如：\
background-color:#112233;\
等价于\
background-color:#123;

只能上面的方法简化，比如

background-color:#222333;

无法简化！

再比如

background-color:#123123;

无法简化！

要记住：

\#000 黑

\#fff 白

\#f00 红

\#333 灰

\#222 深灰

\#ccc 浅灰

### background-color属性表示背景颜色

### background-image:表示设置该元素的背景图片

那么发现默认的背景图片，水平方向和垂直方向都平铺

### background-repeat:表示设置该元素平铺的方式

属性值：

| 值         | 描述                                  |
| --------- | ----------------------------------- |
| repeat    | 默认。背景图像将在垂直方向和水平方向重复。               |
| repeat-x  | 背景图像将在水平方向重复。                       |
| repeat-y  | 背景图像将在垂直方向重复。                       |
| no-repeat | 背景图像将仅显示一次。                         |
| inherit   | 规定应该从父元素继承 background-repeat 属性的设置。 |

给元素设置padding之后，发现padding的区域也会平铺背景图片。

## repeat应用案例

还是上面那个超链接导航栏的案例，我们给body设置平铺的图片，注意：一定找左右对称的平铺图片，才能实现我们要的效果

background-position: 属性设置背景图像的起始位置。这个属性设置背景原图像（由 [background-image](http://www.w3school.com.cn/cssref/pr_background-image.asp) 定义）的位置

属性值：

| 值                                                                                                             | 描述                                                |
| ------------------------------------------------------------------------------------------------------------- | ------------------------------------------------- |
| top left 、top center 、top right、center left、center center、center right、bottom left、bottom center、bottom right | 如果您仅规定了一个关键词，那么第二个值将是"center"。默认值：0 0；这两个值必须挨在一起。 |

### 雪碧图技术（精灵图技术）

#### **CSS雪碧 即**[**CSS Sprite**](https://baike.baidu.com/item/CSS%20Sprite)**，也有人叫它CSS精灵，是一种CSS图像合并技术，该方法是将小图标和背景图像合并到一张图片上，然后利用css的背景定位来显示需要显示的图片部分**

CSS 雪碧图应用原理：\
只有一张大的合并图， 每个小图标节点如何显示单独的小图标呢？

其实就是 截取 大图一部分显示，而这部分就是一个小图标。

使用雪碧图的好处：

1、利用CSS Sprites能很好地减少网页的http请求，从而大大的提高页面的性能，这也是CSS Sprites最大的优点，也是其被广泛传播和应用的主要原因；\
2、CSS Sprites能减少图片的字节，曾经比较过多次3张图片合并成1张图片的字节总是小于这3张图片的字节总和。\
3、解决了网页设计师在图片命名上的困扰，只需对一张集合的图片上命名就可以了，不需要对每一个小元素进行命名，从而提高了网页的制作效率。\
4、更换风格方便，只需要在一张或少张图片上修改图片的颜色或样式，整个网页的风格就可以改变。维护起来更加方便

不足：

1）CSS雪碧的最大问题是内存使用\
2）拼图维护比较麻烦\
3）使CSS的编写变得困难\
4）CSS 雪碧调用的图片不能被打印

我们可以使用background综合属性制·作通天banner，什么是通天banner呢，就是一般我们电脑的屏幕都是1439.但是设计师给我们的banner图都会比这个大，

那么我们可以此属性来制作通天banner。

```css
background:  red  url('./images/banner.jpg')  no-repeat   center top;
```

**background-attach**

设置fixed之后，该属性固定背景图片不随浏览器的滚动而滚动