1.解決圖片溢出的問(wèn)題
因?yàn)槲覀儾荒苤烂繌垐D片的大小蝇刀，可能會(huì)溢出容器功偿，只需要設(shè)置一下img的css樣式即可解決這個(gè)問(wèn)題：
img {
width: 100%
}
2.利用background-image可以接受多個(gè)屬性提升性能
當(dāng)圖片太多或者太大時(shí)，加載起來(lái)需要時(shí)間，如果背景圖片一直空在那里，會(huì)給人一種很慢的感覺(jué)，可以利用 background-image 能夠接收多個(gè)屬性的原理搭盾，利用 linear-gradient() 屬性，根據(jù)背景圖片的顏色分布婉支，添加另一個(gè)顏色值鸯隅，這樣圖片沒(méi)有加載出來(lái)之前，已經(jīng)有 linear-gradient() 顏色充當(dāng)填充向挖。比如：
原圖片：
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%);
}
網(wǎng)絡(luò)加載慢時(shí)蝌以，圖片為 linear-gradient() 顏色
screenshot-missing-image-after.png
可以看出這種方式，十分的友好何之。
原文地址： 使用multiple background-image提高可見(jiàn)的性能優(yōu)化
用于相應(yīng)的背景顏色： 圖片顏色提取器工具
