事情的起因是這樣的 ——
聽聞svg是矢量圖標梯啤，可以無損拉伸大小营勤。
于是我給<span>標簽設了一個svg格式的背景圖片旁舰，并期待效果和這個圖片是一樣的：
image.png
然后敲出了如下代碼
<style>
.demo {
float: left;
width: 20px;
height: 20px;
background-image: url(../../assets/release_icon.svg);
}
</style>
<span class="demo">
</span>
image.png
于是我研究了一下,
發(fā)現給span標簽設置的尺寸是20px * 20px而线， 而svg圖片的原始尺寸是10px * 10px
image.png
所以铭污，應該是svg圖片沒有自適應標簽大小，默認通過拷貝自身的方式膀篮，填充了標簽中空白的空間嘹狞。
然后我就打開了萬能的MDN查了一下，
果然可以設置一個屬性達到我想要的效果：background-repeat: no-repeat;
使背景圖片不自動重復填充
于是我把代碼改成了這樣：
<style>
.demo {
float: left;
width: 20px;
height: 20px;
background-image: url(../../assets/release_icon.svg);
background-repeat: no-repeat;
}
</style>
<span class="demo">
</span>
image.png
圖片是不重復了誓竿，但是大小還是10px * 10px磅网，并沒有拉伸??
于是我又查了一下是不是有設置背景尺寸的屬性。筷屡。果然涧偷。。
background-size: contain;
這個屬性可以使圖片在保持原有比例的同時毙死，縮放到標簽元素可用空間中最大的尺寸燎潮。
于是??
<style>
.demo {
float: left;
width: 20px;
height: 20px;
background-image: url(../../assets/release_icon.svg);
background-repeat: no-repeat;
background-size: contain;
}
</style>
<div>
<span class="demo">
</span>
</div>
image.png
搞定??
所以 ——
既然background-size: contain;可以使圖片大小自適應，
那么background-repeat: no-repeat;這條屬性是不是可以刪掉了扼倘？
于是我嘗試了一下：
<style>
.demo {
float: left;
width: 30px;
height: 20px;
background-image: url(../../assets/release_icon.svg);
background-size: contain;
}
</style>
<div>
<span class="demo">
</span>
</div>
image.png
在這種情況下确封，span標簽的大小是30px * 20px，圖片原始大小是10px * 10px再菊，
如果要完全填充爪喘，并不能保證原圖片的比例，
所以袄简！如果標簽的大小和圖片的原始大小腥放，不是同比例的，還是需要加上background-repeat: no-repeat;這條屬性的绿语！
為了以防以后改動這個圖片的原始大小或者標簽的尺寸秃症，我又默默地加上了??
