CSS圖片拉伸平鋪是CSS中一個(gè)重要的樣式屬性,它可以讓圖片充滿整個(gè)元素或達(dá)到一定的重復(fù)效果。
/* 拉伸平鋪 */ .stretch { background-image: url('image.jpg'); background-size: cover; } /* 重復(fù)平鋪 */ .repeat { background-image: url('image.jpg'); background-repeat: repeat; }
以上代碼演示了兩種不同的拉伸平鋪效果,第一個(gè)例子使用了background-size: cover樣式屬性,它會拉伸圖片以適應(yīng)元素的大小。第二個(gè)例子使用了background-repeat: repeat樣式屬性,它會重復(fù)平鋪圖片。
需要注意的是,拉伸平鋪和重復(fù)平鋪是互斥的,也就是說不能同時(shí)使用。此外,拉伸平鋪可能會導(dǎo)致圖片變形,需要根據(jù)圖片比例進(jìn)行適當(dāng)?shù)恼{(diào)整。