CSS进阶（二十一）background

隐藏的元素背景图片是否加载

ie8-ie11还是会发送请求

firefox不会

chrome和safari会判断父元素是否display也是none,如果是，则不发送请求。元素本身设置none，则发送请求

background-position

可以是具体数值，也可以是百分比值，还可以是 left、 top、right、center 和 bottom 等关键字

如果缺省偏移关键字，则会认为是 center

百分比计算方式

positionX = (容器的宽度 - 图片的宽度) * percentX;

positionY = (容器的高度 - 图片的高度) * percentY;

background-repeat

在保证实现效果的前提下，尽量的放大图片去平铺，能够提升性能

background-color

背景色永远是最低的，可以实现:active点击时，不用更改背景颜色而是更改背景图片的样式，不影响点击元素原有的颜色

ie8不支持多背景，ie9不支持css3渐变

ie9兼容渐变的方式渐变滤镜

filter: progid:DXImageTransform.Microsoft.gradient(startcolorstr=red, endcolorstr= blue, gradientType=1);

gradientType=1 代表横向渐变，gradientType=0 代表纵向淅渐变

透明度，可以使用 IE 浏览器的 8 字符的十六进制颜色表示法，其格式为 #AARRGGBB

透明度的值转换成十六进制

浏览器控制台Math.round(256 * opacity).toString(16);

IE8 浏览器不支持 rgba 半透明背景色，同样可以使用渐变滤镜来进行兼容，让渐变起始色和结束色保持一致，就可以实现纯半透明背景色效果了

在 IE9 浏览器下，rgba 半透明和 filter 渐变会同时起作用，因此使用:root 选择器重置了一下。