CSS的背景圖片拉升功能是用來改變背景圖片的尺寸的。這個功能可以使得背景圖片填滿整個元素的背景,即使它的尺寸比元素大或小。
在編寫CSS代碼時,您可以使用背景圖片拉伸的屬性background-size。 background-size屬性有幾個不同的選項,包括一些預定義的尺寸,例如:cover和contain。 我們來看一下這些選項的用法:
.background { background-image: url('https://cdn.pixabay.com/photo/2022/01/17/15/26/mountains-6944545_960_720.jpg'); background-size: cover; }
在這個樣例中,我們已經設置了一個背景圖片,然后使用了cover選項。 這種情況下,圖片將被拉伸并填充整個元素。
.background { background-image: url('https://cdn.pixabay.com/photo/2022/01/17/15/26/mountains-6944545_960_720.jpg'); background-size: contain; }
在這個例子中,我們同樣設置了一個背景圖片,但是使用的是contain選項,這種情況下,圖片會被縮放直到它錢能夠適應整個元素的高度或寬度。
通過使用這些屬性,您可以輕松讓您的背景圖片在任何大小的元素中保持美觀。