background

background: bg-color bg-image bg-position/bg-size bg-repeat bg-origin bg-clip bg-attachment initial/inherit

1、background-color: color/transparent(默认)/inherit

color:

• 颜色名称： red, green
• 16进制： 形如#RRGGBB，当RR/GG/BB分别相同时，可简写成#RGB，#FF55CC===#F5C
• RGB,这个是函数格式，rgb(R, G, B),其中R, G, B可选的值0~255，或者百分比，rgb(128, 128, 128) ,rgb(50%, 50%, 50%),三个色值中间用逗号（英文）相隔， 可以有空格，也可没有
• RGBA，多了A（阿尔法），表示透明度，0-透明，1-不透明；rgba(120, 120, 120, .5)
• HSL(hue saturation lighteness)色相 饱和度 亮度。色相用数值表示， 取值是色相圆环的度数（0~360），图是百度来的。 饱和度（100%-满饱和度，0%-灰度）亮度（100%-白色， 0%-黑色），例子：hsl(120,100%,25%) /* 深绿色 */ hsl(120,100%,50%) /* 绿色 */ hsl(120,100%,75%) /* 浅绿色 */
• HSLA,加了透明度的HSL

2、background-image(适用于多张图片)

多张图片时，最先声明的图片在最上面。

也可以使用linear-gradient函数生成。

linear-gradient() 函数用于创建一个线性渐变的 "图像"。--摘自《菜鸟教程》

linear-gradient(direction, color-stop0, color-stop1, color-stop2,...)

direction: 可使用角度（xdeg）或者 ‘bottom’，‘right’等表示方向的单词。

0deg(360deg)---to top

90deg --- to right

180deg --- to bottom

-90deg(270deg) --- to left

deg这个单位一定要标明,0deg除外

还可以有 to right bottom这种从左上角到右下角的渐变

color-stop0： 起始颜色， 一个

color-stopn:终止颜色，可以有多个但至少一个（+1），可取的值为有效的颜色值

有的浏览器版本过低可能不支持渐变，所以定义一个background-color:#RRGGBB；备用。这时书写顺序有先后：先定义background-color,再定义background-image。

重复渐变repeating-linear-gradient()

repeating-linear-gradient(方向/角度, color-stop1 hint, color-stop2 hint2, ...,color-stop-final hintn)

上图是一个重复渐变的例子，整体方向为0deg,也就是to top

color-stop1为#3f87a6，后面没有跟hint,默认为0，也就是刚开始的位置;

color-stop2为#fff,hint为 15%，表示从0-15%的位置为#3f87a6---#fff渐变；

color-stop-final为#f69d3c，hint为20%，表示15%-20%之间为#fff---#f69d3c的渐变。

此次渐变只占用了20%的区域，剩下的依照这个队则进行渐变，重复渐变次数为100%/20% = 5

hint除了百分比形式 也可以是数值（xpx）即x像素的位置；还可以是一个范围,如下图

当hint没有内容时，变成普通渐变，从0-100%的位置均匀渐变。

3、 backround-size(适用于多张图片)

• length, 设置图片高度和宽度，只给一个值，第二个值为auto
• percentage: 相对于定位区域的百分比，只给一个值，第二个值为auto
• cover: 根据图片的纵横比，将图片缩放成覆盖背景定位区域的最小大小。
• contain，根据图片的纵横比，将图片缩放成覆盖背景定位区域的最大大小.

4、background-origin（背景图起始位置--相对的）

• padding-box，背景图片填充位置从内边距开始
• content-box，背景图片填充位置从content开始
• border-box,背景图片填充位置从边开始

5、background-clip

• border-box, 背景图会延伸至边的边缘，但是会在边下方（z-idnex中靠下的位置），如果边的样式为非solid，比如dotted这种，就会展示出来。
• padding-box，背景图只延伸至内边距的边缘
• content-box，只在元素内容区域绘制。
• text（实验室阶段），给前景中的文字设置背景图片。

6、background-repeat(适用于多张图片)

• repeat,水平方向/竖直方向均重复
• repeat-x, 相当于repeat-x no-repeat, 水平方向重复，竖直方向不重复
• repeat-y ，相当于 no-repeat repeat-y 水平方向不重复 ，竖直方向重复
• no-repeat, 相当于 no-repeat no-repeat 水平方向不重复 竖直方向不重复
• round 只有一个背景图时，当元素宽度<1.5倍背景图的宽度，表现为一张不重复且有所拉伸（或压缩）的图，>=1.5倍时，表现为两张可能压缩或者拉伸的图
• space 效果形如flex的space-between属性，当两张背景图时，background-repeat: repeat-x, repeat-y;第二张背景图的起始位置在竖直方向上是0

round和space属性，两张图及以上的情况还没有深入研究，其他情况，可以适用在多张背景图片。

7、background-attachment（适用于多张背景图）

• fixed,相对于视口fixed固定
• scroll,相对于元素本身fixed，元素本身有scroll，它也不会随着滚动
• local,相对于元素内容位置固定，会随着scroll而滚动

多张背景图时，对每个背景图的属性设置用逗号隔开。

8、background-position(适用于多张背景图)

• center/top/bottom/left/right
• 30% 50%(x, y) 只有一个值，第二个默认center
• 10px 5em   可以带单位的不同数值
• right 50% bottom 50% (居中)

多张图片混合时，有一个background-blend-mode属性，参考https://developer.mozilla.org/en-US/docs/Web/CSS/blend-mode