所有属性
background-image: non
background-position: 0% 0%
background-repeat: repeat
background-attachment: scroll；// 设置背景图像是否固定
background-color: transparent
IE9+浏览器，则还包括：
background-size: auto auto
background-origin: padding-box // background-origin 属性规定 background-position 属性相对于什么位置来定位。
background-clip: border-box // 规定背景的绘制区域
属性1
background-position: top/right/bottom/left/数值/百分比；
作用：是指定定位的偏移计算从哪个方位算起
例：background-position: right 40px bottom 20px;
注：
1.IE8 浏览器最多只支持同时出现 2 个值，从 IE9 开始支持同时出现 3 个值或 4 个值
2.百分值的计算：
计算公式：
positionX = (容器的宽度 - 图片的宽度) * percentX;
positionY = (容器的高度 - 图片的高度) * percentY;
属性2
background-color 背景色永远是最低的
作用：设置按钮的当前状态
栗子：
a[href]:active, button:active {
background-image: linear-gradient(to top, rgba(0,0,0,.05), rgba(0,0,0,.05));
}
问题1
隐藏元素（display: none;）的 background-image 到底加不加载呢？
不同浏览器的表现：
ie8~ie11: 加载
firefox: 不加载
chrome&safari: none设置在父元素不加载；设置在本身加载；
问题2
渐变背景和 rgba 背景色的兼容处理
1.ie9背景渐变
filter: progid:DXImageTransform.Microsoft.gradient(startcolorstr=red, endcolorstr= blue, gradientType=1);
gradientType=1 代表横向渐变，gradientType=0 代表纵向淅渐变，startcolorstr代表渐变起始的色彩
2.渐变半透明
.gradient {
filter:
progid:DXImageTransform.Microsoft.gradient(startcolorstr=#FFFF0000,endcolorstr=#7 F0000FF,gradientType=0);
background: linear-gradient(to bottom, red, rgba(0,0,255,.5));
}
3.