CSS中平鋪是一種常用的布局方式,可以讓圖像或背景以重復的方式填充整個元素。平鋪有兩種方式:水平方向平鋪與豎直方向平鋪。
當需要平鋪背景時,可以使用background-repeat屬性。該屬性的默認值為repeat,表示背景圖像橫向和縱向均勻重復填充整個元素。如果只需要橫向平鋪,則可以設置該屬性的值為repeat-x。若只需要縱向平鋪,則可以設置為repeat-y。如果不希望背景圖像重復,則可以將該屬性的值設置為no-repeat。
/* 把背景水平方向平鋪 */ body { background-image: url(images/bg.png); background-repeat: repeat-x; }
如果需要平鋪圖像而非背景,則可以使用background-image屬性以及background-repeat屬性。如下所示:
/* 平鋪圖片 */ img { background-image: url(images/pattern.png); background-repeat: repeat; }
當然,平鋪不僅局限于背景圖像,也可以用在容器中的內容。下面是一個實現橫向平鋪的例子:
/* 橫向平鋪容器中的文本 */ .container { white-space: nowrap; background-image: url(images/line.png); background-repeat: repeat-x; }
以上就是CSS中關于平鋪的常用代碼實現,希望對大家有所幫助。
上一篇img函數 php
下一篇css中怎么設置虛線