CSS可以通過設置background-repeat屬性來實現圖片的平鋪。該屬性有四個值:repeat、repeat-x、repeat-y和no-repeat。
其中,repeat表示在水平和垂直方向都平鋪;repeat-x表示只在水平方向平鋪;repeat-y表示只在垂直方向平鋪;no-repeat表示不平鋪。
/* 在水平和垂直方向都平鋪 */ .background { background-image: url("img.png"); background-repeat: repeat; } /* 只在水平方向平鋪 */ .background { background-image: url("img.png"); background-repeat: repeat-x; } /* 只在垂直方向平鋪 */ .background { background-image: url("img.png"); background-repeat: repeat-y; } /* 不平鋪 */ .background { background-image: url("img.png"); background-repeat: no-repeat; }
除了設置background-repeat屬性外,也可以通過設置background-size屬性來調整圖片的大小,以適應容器大小。
/* 將圖片鋪滿容器 */ .background { background-image: url("img.png"); background-size: cover; } /* 將圖片等比縮放到容器大小 */ .background { background-image: url("img.png"); background-size: contain; }
以上是一些CSS圖片平鋪的基本用法,可以根據實際需求進行調整。