CSS中的background-size屬性用于指定背景圖片的大小。
background-size: value;
value可以是以下幾種取值:
- auto:使用原始圖片的尺寸
- length:用像素、厘米、毫米或英寸指定具有固定尺寸。例如:background-size: 50px 100px;
- percentage:百分比值。例如:background-size: 50% 100%;
- cover:保證背景圖片完全覆蓋容器,可能會被截斷。例如:background-size: cover;
- contain:保證圖片完全顯示在容器內(nèi),可能會留有空白。例如:background-size: contain;
舉個例子,如下代碼會設(shè)置背景圖片的寬度為50%,高度為200px。
background-image: url("example.jpg"); background-repeat: no-repeat; background-size: 50% 200px;
在移動端網(wǎng)頁設(shè)計(jì)中,background-size的應(yīng)用尤為廣泛。我們可以利用background-size來優(yōu)化網(wǎng)頁背景圖片的大小,在不同的屏幕尺寸下,讓背景圖片看起來更加美觀和富有藝術(shù)感。