Question

框的背景图像看起来比图像的原始尺寸小。

<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;
}

CSS背景图像看起来比图像的原始尺寸小

1 个答案: