CSS中有一個非常實用的樣式屬性,能夠給HTML中的元素添加背景圖片,并將這張圖片完全鋪滿整個元素。這個樣式屬性就是background-size。
在CSS中,我們可以使用background-size樣式屬性設置背景圖片的大小,有一些常用的屬性值可以設置:
background-size: contain; background-size: cover; background-size: 100% 100%;
其實,在實際開發中,常用的兩種屬性值是contain和cover。
如果我們想要圖片保持原有比例,并且完整的顯示在元素中,我們可以設置background-size為contain:
background-size: contain;
如果我們想要圖片完全鋪滿整個元素,并且會被裁剪一部分,我們可以設置background-size為cover:
background-size: cover;
另外,我們還可以使用長度單位來設置元素的大小,比如可以設置為100%的寬度和100%的高度:
background-size: 100% 100%;
最后,需要注意的是,這個樣式屬性只能應用于有背景圖的元素,不能應用于沒有背景圖片的元素。