CSS 2的background属性很单调

  当我们使用background 属性的时候，实际上使用的是一系列background 相关属性的集合，包括：

• background-image: none
• background-position: 0% 0%
• background-repeat: repeat
• background-attachment: scroll
• background-color: transparent

如果是IE9+浏览器，则还包括：

• background-size: auto auto
• background-origin: padding-box
• background-clip: border-box

---

1. 隐藏元素的background-image 到底加不加载？

一个元素如果display 计算值为none
  在IE 浏览器下（IE8～IE11，更高版本不确定）依然会发送图片请求；
  Firefox 浏览器不会；
  至于Chrome 和Safari 浏览器则似乎更加智能一点：如果隐藏元素同时又设置了background-image，则图片依然会去加载；

如果是父元素的display 计算值为none
  则背景图不会请求，此时浏览器或许放心地认为这个背景图暂时是不会使用的。

两个相关的小知识点：
IE8 浏览器支持base64 图片，包括在background-image 属性中使用，可以节约一个网络请求。但是，base64 图片的渲染性能并不高，只适合尺寸比较小的图片，大尺寸图片慎用。

如果想用background-image 实现鼠标光标经过变换图片的效果（例如，灰色的关闭图片鼠标光标经过变成深色），则务必将这两张图片合并在一张图片上，除了减少请求外，这样做更重要的好处是交互体验更好了。如果图片不合在一起，当鼠标光标经过的时候，就会去请求另外一张图片的地址，如果这个图片没有被缓存，则请求发出去到图片显示是有一段时间的，很容易出现鼠标光标经过关闭图片，结果图片消失的情况，实际上图片不是消失了，而是还在请求的路上。

---

2. 与众不同的background-position 百分比计算方式

百分比值计算方法：
positionX = (容器的宽度 - 图片的宽度) * percentX;
positionY = (容器的高度 - 图片的高度) * percentY;

例如：
设置图片background-position:-50% -50%
容器尺寸是160×160，图片尺寸是256×192，图片尺寸大于容器尺寸，所以：
• (容器的宽度−图片的宽度) × (-50%) 的结果是个正值；
• (容器的高度−图片的高度) × (-50%) 的结果也是个正值。
因此，最终的表现并不是图片定位在容器外，而是定位在容器内。
如下图所示

负值百分比定位.png

---

3. background-repeat 与渲染性能

  background-repeat 支持repeat、repeat-x、repeat-y 这几个值，语义清晰，兼容性好，没什么有趣的故事。background-repeat 以前用得很多，但如今设计趋势是喜欢扁平和纯色，其使用频率下降明显，反倒是在实现一些复杂纹理或者配合“蝉原则”实现随机背景这些比较新潮的地方见到的比较多。
  唯一值得一提的一个小知识点就是background-repeat 的性能。举个例子，要实现某黑色半透明遮罩背景，因为IE8 并不支持rgba 半透明背景色，所以为了兼容我们决定使用一个半透明图片代替，假设图片名为alpha.png，则CSS 代码如下：

.overlay {
  background: url(alpha.png);
  background: rgba(0,0,0,.75);
}

  然后有些人为了追求极致，就把alpha.png 做成了1 像素×1 像素大小，确实图片尺寸小了那么一点点，但是遮罩背景出现的时候会有明显的卡顿，体验非常不好。究其原因，就是平铺图片尺寸太小，平铺次数太多，渲染太吃力，其实我们大可把背景图保存成100 像素×100 像素大小，这样一来，图片尺寸并没有大多少，但是渲染性能却有明显提升。

---