1.解决图片溢出的问题
因为我们不能知道每张图片的大小，可能会溢出容器，只需要设置一下img的css样式即可解决这个问题：
img {
width: 100%
}
2.利用background-image可以接受多个属性提升性能
当图片太多或者太大时，加载起来需要时间，如果背景图片一直空在那里，会给人一种很慢的感觉，可以利用 background-image 能够接收多个属性的原理，利用 linear-gradient() 属性，根据背景图片的颜色分布，添加另一个颜色值，这样图片没有加载出来之前，已经有 linear-gradient() 颜色充当填充。比如：
原图片：
screenshot-slices-before.jpg
.page-head--masthead {
background-image: url(/img/css/masthead-large.jpg),
linear-gradient(to right, #807363 0%, #251d16 50%, #3f302b 75%, #100b09 100%);
}
网络加载慢时，图片为 linear-gradient() 颜色
screenshot-missing-image-after.png
可以看出这种方式，十分的友好。
原文地址： 使用multiple background-image提高可见的性能优化
用于相应的背景颜色： 图片颜色提取器工具
