复合写法:
background:bg-color bg-imgage bg-position/bg-size bg-repeat bg-origin bg-clip bg-attachment initial|inherit;
颜色 图片 位置/大小 重复 定位区域 绘制区域 固定
插入背景图:
background-image:url() | linear-gradient() | repeating-linear-gradient | radial-gradient() | repeating-radial-gradient();
linear-gradient() 函数 用于创造 一个表示两种或以上颜色 线性渐变 的图片 :
linear-gradient(direction,color1.color2,...)
direction 使用关键字或角度deg指定渐变方向: direction:to bottom [默认值]
radial-gradient() 函数 用于创造 一个表示两种或以上颜色 径向渐变 的图片 :
background-image:radial-gradient(shape size position , start-color,...,last-color)
shape 指定圆的类型: shape:ellipse [默认值] | circle
ellipse 椭圆
size 指定渐变的范围大小: size:farthest-conrner [默认值] | farthest-side | closest-side | closest-corner;
farthest-conrner 指定径向渐变半径长度为从圆心到离圆心最远的角
farthest-side 离圆心最远的边
closest-corner 离圆心最近的角
closest-side 离圆心最近的边
postion 指定渐变的位置: position:side | percentage | val px val px；
repeating-linear/radial-gradient() 函数 用于创建重复的渐变图像:
repeating-linear/radial-gradient(angle | to side/corner , color1 percentage/valpx , color2 percentage/valpx)
指定背景图的初始位置:
水平方向:background-x:(side | percentage | val px)
垂直方向:bakcground-y:(side | percentage | val px)
复合写法：background-position:水平方向(side | percentage | val px) 垂直方向(side | percentage | val px) [默认值为 0% 0%];
[若仅指定一个值，则其他值将会是center或50%]
指定背景图的大小：
background-size:length | percentage | cover | contain
percentage：相对于背景定位区域 的百分比计算
[如果只给出第一个值，则第二个值为auto]
cover: 将图像保持宽高比缩放至覆盖定位区域 的最小尺寸
contain: 将图像保持宽高比缩放至抵达上下边 或 左右边 的尺寸
指定背景图是否重复平铺
background-repeat:repeat [默认值] | repeat-x | repeat-y | no-repeat；
指定背景图的定位区域
background-origin: content-box [默认值] | padding-box |
指定背景图的绘制区域
background-clip:border-box [默认值] | padding-box | content-box | text
[background-clip:text暂未兼容 需加浏览器前缀才能使用 如 -webkit-background-clip:text;]
指定背景图的固定方式
background-attachemt:scroll [默认值] | fixed | local
[scroll 默认值 背景图随页面滚动]
[fixed 背景图不会随页面滚动]
[local 背景图随元素内容滚动]
