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 div 是空的，因此它的宽度为 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;
}