背景

• background-color

  • rgb() rgba() 十六进制

  • padding是有背景颜色

• background-image

  • 1 一定要用url()

  • 2 相对路径和绝对路径

  • 3 linear-gradient（）线性渐变

    • to right,blue,red //渐变方向 开始颜色 结束颜色

    • 45deg,blue,red //deg表示度数

    • to bottom,blue, yellow 20%,red //中间色

    • 私有前缀

      • chrome: -webkit-

      • firefox: -moz-

      • IE,Edge: -ms-

      • 欧朋：- o -

  • 4 radial-gradient() 径向渐变

    • 50% 50%(圆心坐标) ,red , blue

    • 50% 50%(圆心坐标) ,red 30% , blue 40%

• background-repeat

  • repeat; x,y均平铺（默认）

  • repeat-x;  //x平铺

  • repeat-y; //y平铺

  • no-repeat; //不平铺

• background-size

  • 设置背景图片的尺寸

  • 表示

    • 1 :100px 200px;(宽度 高度)

    • 2 用百分数设置

    • 3 等比例:auto

    • 4 contain: 容纳进盒子

    • 5 cover：撑满盒子

• background-clip

  • border-box:裁切伸至边框

  • 2 padding-box: 延伸至内框处

  • 3 content-box: 裁剪至内容处

• background-attachment

  • fixed

  • local

  • scroll

• background-position

  • :100px 100px

  • : top center 

  • ：bottom（另一个默认是center）

  • CSS精灵

• background综合属性

  • : white url() no-repeat center top