CSS背景平鋪是指在一個元素中,將背景圖像重復并沿著x軸和/或y軸平鋪。通過這種方式,可以使背景圖像覆蓋整個元素區域,而不是只在元素大小范圍內展示一部分。
要實現CSS背景平鋪,需要使用background-repeat屬性。該屬性有以下取值:
background-repeat: repeat; /* 默認值,表示在x和y軸上平鋪背景圖像 */ background-repeat: repeat-x; /* 僅在x軸上平鋪背景圖像 */ background-repeat: repeat-y; /* 僅在y軸上平鋪背景圖像 */ background-repeat: no-repeat; /* 不復制,背景圖像只展示一遍 */
例如,以下代碼將在頁面中創建一個寬度為400像素,高度為300像素,背景圖像為"bg.png"的div元素。背景圖像將在x和y軸上平鋪并重復展示:
div { width: 400px; height: 300px; background-image: url('bg.png'); background-repeat: repeat; }
可以使用不同的值來創造不同的視覺效果。通過使用background-repeat屬性,可以創建各種有趣的背景圖案來增強網頁設計。