img图片的使用

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提高可见的性能优化

用于相应的背景颜色： 图片颜色提取器工具