背景样式

背景属性的使用

    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,...)