一、背景属性总结

二、详解

1、background-color四种取值方法

 - 颜色名称red、yellow 
 - rgb(0~255,0~255,0~255) 
 - 十六进制 #00ff00
 - rgba(0~255,0~255,0~255,0~1)，最后一位表示透明度
1
2
3
4

2、background-image背景图片

background-image:url(img/1.jpg)
1

引用图片地址

3、background-repeat背景图片平铺

background-repeat:no-repeat/repeat/repeat-x/repeat-y
no-repeat不平铺，只显示一张
repeat：全部平铺，默认值
repeat-x :x轴平铺
repeat-y :y轴平铺
1
2
3
4
5

4、background-position

针对背景图片位置调整的参数
三种取值类型：
1、20px 20px;左边间隙20px，上边间距20px
2、10% 10%;水平垂直各10%位置显示
3、background-position:left top;
水平位置：left、center、right
垂直位置：top、center、bottom

5、background-size设置图片大小，缩放来适应屏幕

四种取值：
1、background-size：400px 400px；会导致图片拉升变形或挤压变形
2、background-size：100% 100%;整个盒子的宽高，同样会导致图片拉升变形或挤压变形
3、cover（盒子填满，图片可裁）覆盖盒子，等比例放大，水平垂直盖住所有盒子。图片像素变小，但是不会变形，放大后裁掉部分图片，导致图片显示内容不完全
4、cotain（图片完全展示，盒子可留白）把图片放到最大尺寸，使其宽或高完美适应盒子，由于图片有自己的宽高比例，会存在盒子留白的情况

6、background-attachment:fixed;

相对于浏览器来说的，会在浏览器整个窗口页面的background-position所设置的位置处固定显示。但是如果div盒子大小比较小，不覆盖浏览器的background-position位置，那么图片就不会显示了。

7、复合属性

background:yellow url(‘image/01.png’) no-repeat center fixed; 顺序可调整
复合属性中如果不设置某些属性，但这些属性恰好在复合属性之前设置了，那么就会覆盖掉，默认该属性不设置。
background-size不可以进行复合，单独设置