在網(wǎng)頁設計過程中,我們經(jīng)常需要對圖片或者背景進行鋪滿,同時還需要在圖片之間添加一定的間距。這時候,CSS的平鋪加間距技術就可以派上用場了。
首先,我們需要設置圖片的背景。這可以通過background-image屬性來實現(xiàn)。例如:
img{ background-image: url("image.jpg"); }
接下來,我們需要設置平鋪的方式??梢允褂胋ackground-repeat屬性來指定:
img{ background-image: url("image.jpg"); background-repeat: repeat; }
其中,repeat表示平鋪,x表示只在水平方向上平鋪一次,y表示只在垂直方向上平鋪一次。
如果我們希望在圖片之間添加一定的間距,就需要使用background-position和padding屬性。例如:
img{ background-image: url("image.jpg"); background-repeat: repeat; background-position: center center; padding: 10px; }
其中,background-position屬性的值可以是關鍵字(例如center、top、left等)也可以是像素值;padding屬性表示內邊距大小。這樣,就可以在圖片之間添加一定的間距了。
最終的效果如下圖: