background-size值為cover和值為100%的區別

background-size：100% 100%;---按容器比例撐滿，圖片變形； background-size：cover;---把背景圖片放大到適合元素容器的尺寸，圖片比例不變。

　IE8及以下版本用濾鏡來兼容background-size如下:

filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='bg.jpg', sizingMethod='scale');}

下面我通過給下圖背景圖添加background-size屬性的不同屬性值，更直觀的顯示出100%和cover的區別

　　 

下圖是添加background-size:100% 100% 后的背景圖效果，背景圖被拉伸后有點失真

　　

下圖是添加background-size: cover 后的背景圖效果，背景圖被拉伸后背景圖不能全部顯示

　　

它們的區別：

background-size:100% 100%把背景圖進行橫向和縱向的拉伸，圖片比例隨之改變，
可能導致圖像失真（建議讓UI給原始背景圖，否則容易出現圖片拉伸后失真）

background-size: cover把背景圖擴展至足夠大，直至完全覆蓋背景區域，
圖片比例保持不變且不會失真，但某些部分被切割無法顯示完整背景圖像