CSS中的背景圖片可以通過background-size屬性來放縮。該屬性通常使用像素、百分比或者cover、contain等關鍵字來設置,下面我們來看一下具體的使用方法。
div{ width: 500px; height: 300px; background-image: url('bg.jpg'); /* 將背景圖片放縮到容器的寬度和高度 */ background-size: 100% 100%; }
上述代碼中,我們設置了一個寬度為500px,高度為300px的div容器,并將一張背景圖片作為該容器的背景。通過將background-size屬性的值設置為100% 100%,背景圖片可將容器鋪滿。
div{ width: 500px; height: 300px; background-image: url('bg.jpg'); /* 將背景圖片寬度設置為容器寬度的2倍,高度自適應 */ background-size: 200% auto; }
如果我們希望背景圖片的寬度為容器寬度的2倍,而高度則根據寬度自適應,則可以將第一個值設置為200%,第二個值設置為auto。
div{ width: 500px; height: 300px; background-image: url('bg.jpg'); /* 背景圖片在保持比例的同時盡可能鋪滿容器 */ background-size: cover; }
當我們希望背景圖片在保持比例的同時盡可能鋪滿容器時,可以將值設置為cover。
div{ width: 500px; height: 300px; background-image: url('bg.jpg'); /* 背景圖片在保持比例的同時不超出容器 */ background-size: contain; }
而如果我們希望背景圖片在保持比例的同時不超出容器,則可以將值設置為contain。
通過background-size屬性,CSS中的背景圖片可以實現多種形式的放縮。希望這篇文章能夠幫助大家更好地使用CSS。
上一篇mysql更改字符集操作
下一篇css中背景圖片外邊距