CSS background属性详解

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

此属性是一个 简写属性，可以在一次声明中定义一个或多个属性：background-clip、background-color、background-image、background-origin、background-position、background-repeat、background-size，和 background-attachment。

属性	说明	取值
background-attachment	决定背景图像的位置是在视口内固定，或者随着包含它的区块滚动	fixed、scroll、local
background-clip	设置元素的背景（背景图片或颜色）是否延伸到边框、内边距盒子、内容盒子下面	border-box、padding-box、content-box、text
background-origin	规定了指定背景图片background-image 属性的原点位置的背景相对区域	border-box、padding-box、content-box
background-color	设置元素的背景色, 属性的值为颜色值或关键字"transparent"二者选其一
background-image	用于为一个元素设置一个或者多个背景图像
background-position	为每一个背景图片设置初始位置。 这个位置是相对于由 background-origin 定义的位置图层的
background-repeat	定义背景图像的重复方式。背景图像可以沿着水平轴，垂直轴，两个轴重复，或者根本不重复
background-size	设置背景图片大小。图片可以保有其原有的尺寸，或者拉伸到新的尺寸，或者在保持其原有比例的同时缩放到元素的可用空间的尺寸

1. background-position

可选值：两个参数，水平位置和垂直位置。如果只有一个值，第二个值为“center”。
默认值是元素的左上顶角。可以使用位置关键字（top，right，bottom，left，center）。百分比（以元素大小为基值）。像素值。

2. background-size

可选值：两个数值，如果只有一个值，第二个值为auto。
默认是图片自身大小。可以使用像素值，百分百（以元素大小为基值）。
cover：等比例缩放图片，覆盖这个元素。类似与windows中桌面背景的“填充”。
contain：等比例缩放图片，适应元素的宽或者高。类似于windows中桌面背景的“适应”。

注意：如果同时设置了“position”和“size”两个属性，应该用左斜杠“/”，而不是用空格把两个参数值隔开：“position/size”。

3. 多背景设置

多背景的写法：使用逗号“，”隔开，继续写背景属性。

background: color position size repeat origin clip attachment image, color position size repeat origin clip attachment image;

也可以具体属性单独设置：background-image：url（image url 1），url（image url 2）；

background-image: linear-gradient(rgba(0, 0, 255, 0.5), rgba(255, 255, 0, 0.5)),
                  url("../../media/examples/lizard.png");