CSS3-新增背景系列background相关属性

1. 回顾一下之前学习过的background属性

1.1 background-color
1.2 background-image
1.3 background-repeat
1.4 background-position
1.5 background-attchment
1.6 background

2. CSS3新增的background属性

2.1 background-origin
2.2 多重背景
2.3 background-size

1.1 背景颜色属性：background-color

颜色的表示方法有3种：单词、rgb表示法、十六进制表示法

1. 单词： 能够用单词来表述的，都是简单颜色

2. rgb表示法

rgb表示三原色“红”red、“绿”green、“蓝”blue 。
光学显示器，每个像素都是由三原色的发光原件组成的，靠明亮度不同调成不同的颜色的。

用逗号隔开，r、g、b的值，每个值的取值范围0~255，一共256个值

绿色：
background-color: rgb(0,255,0);  
蓝色：
background-color: rgb(0,0,255);

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

3. 十六进制表示法

所有用#开头的值，都是16进制的。

红色：
background-color: #ff0000;

16进制表示法，也是两位两位看，看r、g、b，但是没有逗号隔开。
ff就是10进制的255 ，00 就是10进制的0，00就是10进制的0。所以等价于rgb(255,0,0);

补充：
十进制中的基本数字（一共10个）：0、1、2、3、4、5、6、7、8、9
十六进制中的基本数字（一共16个）：0、1、2、3、4、5、6、7、8、9、a、b、c、d、d、e、f

十六进制中，13 这个数字表示什么？
表示1个16和3个1。 那就是19。 这就是位权的概念，开头这位表示多少个16，末尾这位表示多少个1。

1.2 background-image

用于给盒子加上背景图片。背景天生是会被铺满的。

background:url(images/1.jpg);

1.3 background-repeat

设置背景图是否重复的，重复方式的。

• background-repeat:no-repeat; 不重复
• background-repeat:repeat-x; 横向重复
• background-repeat:repeat-y; 纵向重复

1.4 background-position

背景定位属性

background-position:向右移动量 向下移动量

用单词描述：

描述左右的词： left、 center、right
描述上下的词： top 、center、bottom

右下角：background-position: right bottom;

1.5 背景图片是否滚动（background-attchment）

1. scroll：滚动。默认值
2. fixed：固定。不会随着滚动条的滚动而滚动
3. local

1.6 background综和属性

background属性和border一样，是一个综合属性：

background:red url(1.jpg) no-repeat 100px 100px fixed;

等价于：
background-color:red;
background-image:url(1.jpg);
background-repeat:no-repeat;
background-position:100px 100px;
background-attachment:fixed;

可以任意省略部分：

background: red;

如果盒子又有背景图片，又有背景颜色。实际上以显示图片为主，富裕的地方，用颜色填充。

background: blue url(images/wuyifan.jpg) no-repeat 100px 100px;

2.1 背景图片的基准点（background-origin）

1. border-box： 忽略边框，直接从边框的起始0，0点开始平铺
2. padding-box：默认值，忽略padding，直接从padding的起始0,0点开始平铺
3. content-box：从内容部分开始平铺，会预留出padding的位置。所以说padding会对它造成影响

2.2 多重背景

背景图片之间用逗号隔开，可以写多组，最先渲染的图片有可能会遮住后面渲染的图片。

background:  url(images/1.jpg) 0 0 no-repeat,url(images/2.jpg) 121px 0 no-repeat,url(images/3.jpg) 242px 0 no-repeat;

2.3 控制背景图片的大小（background-size）

background-size:值

取值：

1. **长度值**px
2. 百分比：以盒子宽度为参照
3. auto：背景图片的真实大小

4. contain：完全显示（当图片的宽度或是高度在缩放的时候有一个“碰到“了盒子的边缘，则停止变化）

5. cover：完全铺满（将背景图像等比缩放到完全覆盖容器，背景图像有可能超出容器）

当只有一个值，如宽度实现拉伸，高度会默认auto，保持等比例。
当有两个值，宽度和高度会分别拉伸到对应的值，可能会变形。

补充：还有一个很有趣的C3新增背景相关属性

background-repeat:round;

背景图像自动缩放直到适应且填充满整个容器。
感兴趣可以试试噢，非常方便~