在CSS中,我們可以使用background-size這個屬性來控制背景圖片的大小。其中,background-size的值可以是數值、百分比或者是關鍵詞。其中,cover和contain這兩個關鍵詞是非常常用的。
cover表示背景圖像將盡可能的填滿整個容器的大小,并且保持寬高比。這意味著圖像可能會大于容器的大小,但永遠不會小于容器的大小。
.container{ background-image: url("image.jpg"); background-size: cover; }
contain則表示圖像將完整地顯示在容器中,而不會變形。這意味著圖像可能會小于容器的大小,但永遠不會大于容器的大小。
.container{ background-image: url("image.jpg"); background-size: contain; }
需要注意的是,使用cover和contain時,圖像的寬高比例將被保持不變。如果你想要改變圖像的寬高比例,則需要設置background-size的值為數值或者百分比。
.container{ background-image: url("image.jpg"); background-size: 100% 50%; /* 寬度為100%,高度為50% */ }
需要注意的是,在使用寬度百分比的同時,容器的高度必須是固定的,否則圖像將不斷被拉伸或壓縮。
綜上所述,我們可以使用background-size這個屬性來精細地控制背景圖片的大小和位置。
上一篇css 四角圓
下一篇css3怎么旋轉180