CSS中,要讓背景圖片居中平鋪,可以使用background-position和background-repeat屬性。
background-position:
background-position: center center;
將背景圖片在水平和垂直方向上都居中。
background-repeat:
background-repeat: repeat;
將背景圖片在水平和垂直方向上進行平鋪。
如果要讓背景圖片在容器中居中平鋪,可以將這兩個屬性加在一個樣式中。
.container { background-image: url("img/bg.jpg"); background-position: center center; background-repeat: repeat; }
上述代碼將會在.container元素中居中平鋪背景圖片。
如果只想在一個方向上進行平鋪,可以將background-repeat屬性設置為repeat-x或repeat-y。
.container { background-image: url("img/bg.jpg"); background-position: center center; background-repeat: repeat-x; }
上述代碼將會在.container元素中在水平方向上進行平鋪,垂直方向上不進行平鋪。