背景颜色——background-color
- 英文
- 十六进制
- rgb
- rgba
背景图片——background-image
url(图片路径)
图片分布——background-repeat
repeat 默认平铺 repeat-x 沿x轴平铺 repeat-y 沿y轴平铺 no-repeat 不平铺，仅显示原有的一张图片
图片位置——background-position
- 20px 20px; 沿xy轴的坐标点，可以按x轴，y轴分开写 eg:background-position-x:20px；
- 10% 20%； 在宽和高的占比，只能是大概值，不精准
- A B; A(left center right) B(top center botton) eg:background-position:center center;当ab一样时，可简写为background-position:center；
尺寸——background-size(CSS3)
- 400px 400px; 宽 高(如果只有一个值，表示宽按该数值显示，高自适应，等比例缩放)
- 100% 100%;
- cover; 等比例扩展覆盖，不考虑背景区域大小(图片展示不全)
- contain; 等比例扩展覆盖，被背景区域限制(图片全部展示)
定位——background-origin(CSS3)
- padding-box 图片贴着内边距
- border-box 图片贴着边框
- content-box 图片贴着内容
绘制——background-clip(CSS3)
- padding-box 图片被裁剪到内边距
- border-box 图片被裁剪到边框
- content-box 图片被裁剪到内容
background-origin和background-clip的语法很接近，但是有实际上的差别。从语义上看background-origin是定位的意思，对图片本身不会做出改变；而background-clip的意思是绘制，会对图片进行裁剪，下面的图片是六种方式的对比，可以仔细观察一下：
固定方式——background-attwchment
- scroll 背景随浏览器窗口滚动
- fixed 背景不随浏览器窗口滚动，相对于浏览器固定
