背景属性的使用
background-color:背景颜色
背景颜色值：十六进制方法表示
transparent 透明度
background-image:url(图片路径) 背景图像
返回父级(上级) ../
背景重复方式
background-repeat属性
repeat: 沿水平和垂直两个方向平铺 默认
no-repeat:不平铺 ,只出现一次
repeat-x:沿x轴平铺
repeat-y:沿y轴平铺
background-position(前面是水平，后面是垂直)属性
Xpos Ypos 单位:px,Xpos表示水平位置,Ypos表示垂直位置
X% Y% 使用百分比表示背景的位置
X、Y方向关键词 水平方向的关键词:left、center、right
垂直方向的关键词:top、center、bottom
background-position:20px 20px; 意思就是向右20像素 向下20像素
x轴向右是+ 向左是-
y轴向下是+ 向上是-
工作的时候是要精确的 需要ps去测量
background属性 复合属性 可以写 背景颜色 背景图像 背景定位 背景重复不重复显示 顺序不需要固定
background: red url() no-repeat 280px center; 红色 图片路径 不重复 右280px 垂直居中
background-size 背景尺寸
auto 默认值，使用背景图片保持原样
percentage 当使用百分值是，不是相对于背景的尺寸大小来计算的，而是相对于元素宽度来计算的
cover 整个背景图片放大填充整个元素 背景图片会被裁切
contain 让背景图片保持本身的宽高比例，将背景图片缩放到宽度或者高度正好适应所定义背景的区域 会以最合适的比例 添加到盒子中 但不一定会填充满整个盒子
让UI提供图片的时候要大也不要小 放大会
渐变属性的使用
线性渐变 linear-gradient（企业中一般用的到） 颜色沿着一条直线过渡：从左到右、从右到左、从上到下等
linear-gradient(position(渐变方向),color1(第一种颜色),color2(第二种颜色),...)
径向渐变 圆形或椭圆形渐变，颜色不再沿着一条直线变化，而是从一个起点朝所有方向混合
比如 Webkit内核的加前缀
-webkit-linear-gradient(position,color1,color2,...)
