CSS背景圖像顯得比圖像的尺寸小很多

Question

boxF的背景圖像顯得比圖像的尺寸小很多。

<style type="text/css"> 
#boxA, #boxB, #boxC, #boxD, #boxE, #boxF { 
float:left;padding:10px;margin:10px;-moz-user-select:none; 
} 
#boxA { background-color: #6633FF; width:75px; height:75px; } 
#boxB { background-color: #FFFFFF; width:175px; height:200px; } 
#boxC { background-color: #66FFFF; width:75px; height:75px; } 
#boxD { background-color: #6600FF; width:75px; height:75px; } 
#boxF { background-image: url("http://www.wesellcoffee.com/media/large%20platter%2011.jpg"); 
    background-size:100%; 
background-repeat: no-repeat; 
} 
#boxE { background-color: #60330F; width:75px; height:75px; } 
</style> 

這裏是一個Fiddle

Answer 1

當然，你#boxF格是空的，所以它具有0寬度和高度爲0，它有唯一的大小是你給的一切，10px的填充。只要給它一個寬度和高度，按規定你會沒事的，see fiddle

#boxA, #boxB, #boxC, #boxD, #boxE, #boxF { 
    float:left; 
    padding:10px; 
    margin:10px; 
    -moz-user-select:none; 
} 
#boxA { 
    background-color: #6633FF; 
    width:75px; 
    height:75px; 
} 
#boxB { 
    background-color: #FFFFFF; 
    width:175px; 
    height:200px; 
} 
#boxC { 
    background-color: #66FFFF; 
    width:75px; 
    height:75px; 
} 
#boxD { 
    background-color: #6600FF; 
    width:75px; 
    height:75px; 
} 
#boxF { 
    background-image: url("http://www.wesellcoffee.com/media/large%20platter%2011.jpg"); 
    background-size:100%; 
    background-repeat: no-repeat; 
    width:600px; 
    height:537px; 
} 
#boxE { 
    background-color: #60330F; 
    width:75px; 
    height:75px; 
}