css3 背景属性

CSS 背景属性用于定义HTML元素的背景。CSS背景属性有：background-color、background-image、background-position、background-size、background-repeat、background-attachment、background-origin、background-clip。

下面来看看各个属性的使用：

1、background-color

background-color 属性定义了元素的背景颜色。在CSS中，颜色值通常以以下三种方式定义：
1、十六进制 - 如：“#ff0000”
2、RGB - 如：“rgb(255,0,0)”
3、颜色名称 - 如：“red”

background-color:#b0c4de;
background-color:rgb(0, 128, 255);
background-color:red;

2、background-image

background-image 属性描述了元素的背景图像。默认情况下，背景图像进行平铺重复显示，以覆盖整个元素实体。

background-image:url('paper.gif');

3、background-position

background-position属性设置背景图像的起始位置。这个位置是相对于由 background-origin 定义的位置图层的。

/* Keyword values */
background-position: top;
/* equal to first */
background-position: top center;
background-position: bottom;
background-position: left;
background-position: right;
background-position: center;

/* <percentage> values */
background-position: 25% 75%;

/* <length> values */
background-position: 0 0;
background-position: 1cm 2cm;
background-position: 10ch 8em;

/* Multiple images */
background-position: 0 0, center;

/* Edge offsets values */
background-position: bottom 10px right 20px;
background-position: right 3em bottom 10px;
background-position: bottom 10px right;
background-position: top right 10px;

/* Global values */
background-position: inherit;
background-position: initial;
background-position: revert;
background-position: unset;

4、background-size

background-size 设置背景图片大小。图片可以保有其原有的尺寸，或者拉伸到新的尺寸，或者在保持其原有比例的同时缩放到元素的可用空间的尺寸。

如果属性值为auto，则以背景图片的比例缩放背景图片。

如果属性值为cover，则缩放背景图片以完全覆盖背景区，可能背景图片部分看不见。和 contain 值相反，cover 值尽可能大的缩放背景图像并保持图像的宽高比例（图像不会被压扁）。该背景图以它的全部宽或者高覆盖所在容器。当容器和背景图大小不同时，背景图的 左/右 或者 上/下 部分会被裁剪。

如果属性值为contain，则缩放背景图片以完全装入背景区，可能背景区部分空白。contain 尽可能的缩放背景并保持图像的宽高比例（图像不会被压缩）。该背景图会填充所在的容器。当背景图和容器的大小的不同时，容器的空白区域（上/下或者左/右）会显示由 background-color 设置的背景颜色。

如果属性值为数字长度，则指定背景图片大小。
如果属性值为百分比长度，则指定背景图片相对背景区（background positioning area）的百分比。背景区由background-origin设置，默认为盒模型的内容区与内边距，也可设置为只有内容区，或者还包括边框。如果attachment 为fixed，背景区为浏览器可视区（即视口），不包括滚动条。不能为负值。

/* 关键字 */
background-size: cover
background-size: contain

/* 一个值：这个值指定图片的宽度，图片的高度隐式的为 auto */
background-size: 50%
background-size: 3em
background-size: 12px
background-size: auto

/* 两个值 */
/* 第一个值指定图片的宽度，第二个值指定图片的高度 */
background-size: 50% auto
background-size: 3em 25%
background-size: auto 6px
background-size: auto auto

/* 逗号分隔的多个值：设置多重背景 */
background-size: auto, auto     /* 不同于 background-size: auto auto */
background-size: 50%, 25%, 25%
background-size: 6px, auto, contain

/* 全局属性 */
background-size: inherit;
background-size: initial;
background-size: unset;

5、background-repeat

background-repeat CSS 属性定义背景图像的重复方式。背景图像可以沿着水平轴，垂直轴，两个轴重复，或者根本不重复。

如果属性值为space，则图像会尽可能得重复，但是不会裁剪。第一个和最后一个图像会被固定在元素 (element) 的相应的边上，同时空白会均匀地分布在图像之间。background-position属性会被忽视，除非只有一个图像能被无裁剪地显示。只在一种情况下裁剪会发生，那就是图像太大了以至于没有足够的空间来完整显示一个图像。

如果属性值为round，则随着允许的空间在尺寸上的增长，被重复的图像将会伸展 (没有空隙), 直到有足够的空间来添加一个图像。当下一个图像被添加后，所有的当前的图像会被压缩来腾出空间。例如，一个图像原始大小是 260px, 重复三次之后，可能会被伸展到 300px, 直到另一个图像被加进来。这样他们就可能被压缩到 225px.

/* 单值语法 */
background-repeat: repeat-x;
background-repeat: repeat-y;
background-repeat: repeat;
background-repeat: space;
background-repeat: round;
background-repeat: no-repeat;

/* 双值语法：水平 horizontal | 垂直 vertical */
background-repeat: repeat space;
background-repeat: repeat repeat;
background-repeat: round space;
background-repeat: no-repeat round;

background-repeat: inherit;

6、background-attachment

background-attachment CSS 属性决定背景图像的位置是在视口内固定，或者随着包含它的区块滚动。

background-attachment的属性值常用的有三个：

fixed：此关键属性值表示背景相对于视口固定。即使一个元素拥有滚动机制，背景也不会随着元素的内容滚动。

local：此关键属性值表示背景相对于元素的内容固定。如果一个元素拥有滚动机制，背景将会随着元素的内容滚动，并且背景的绘制区域和定位区域是相对于可滚动的区域而不是包含他们的边框。

scroll：此关键属性值表示背景相对于元素本身固定，而不是随着它的内容滚动（对元素边框是有效的）。

/* 关键 属性值 */
background-attachment: scroll;
background-attachment: fixed;
background-attachment: local;

/* 全局 属性值 */
background-attachment: inherit;
background-attachment: initial;
background-attachment: unset;

7、background-origin

background-origin 规定了指定背景图片background-image 属性的原点位置的背景相对区域。当使用 background-attachment 为 fixed 时，该属性将被忽略不起作用。

/* 背景图片的摆放以 border 区域为参考 */
background-origin: border-box
/* 背景图片的摆放以 padding 区域为参考 */
background-origin: padding-box
/* 背景图片的摆放以 content 区域为参考 */
background-origin: content-box

background-origin: inherit

8、background-clip

background-clip 设置元素的背景（背景图片或颜色）是否延伸到边框、内边距盒子、内容盒子下面。

/* Keyword values */
background-clip: border-box;
background-clip: padding-box;
background-clip: content-box;
background-clip: text;

/* Global values */
background-clip: inherit;
background-clip: initial;
background-clip: unset;

background-origin属性和background-clip属性乍一看上去很相似，但是它们的原理却不一样。关于background-origin属性和background-clip属性的区别，可以参考这一篇文章，写的非常好！

9、background *****（重要）

background 是一种 CSS 简写属性，用于一次性集中定义各种背景属性，包括 color, image, origin 与 size, repeat 方式等等。

如果需要设置background属性的值，可以按照background-color、background-image、background-position、background-size、background-repeat、background-attachment、background-origin、background-clip的顺序依次书写对应属性的值。

注意：background-size只能紧接着background-position出现，用"/“分割。比比如"center/80%”。还有在书写background-origin、background-clip这两个值时，如果只出现一个值，则同时设定 background-origin 和 background-clip，比如如果设置background值只出现一个border-box，则同时设置background-origin 和 background-clip为border-box。

background: red url("demo.png") left top/100px 100px repeat scroll border-box;

background: url("demo.png") left top;

background: url("demo.png") center/80% no-repeat;