CSS背景平鋪是一種將背景圖像重復顯示以填充整個元素的技術。 這是通過使用CSS屬性background-repeat實現的。
.example { background-image: url('background.png'); background-repeat: repeat; }
在上面的代碼中,背景圖像是通過使用url函數引用圖像文件的路徑來設置的。然后,通過將background-repeat屬性設置為repeat,背景圖像被平鋪了,直到整個元素都被完全填充。
如果您只想在水平方向或垂直方向上重復圖像,則可以使用background-repeat屬性的另外兩個選項:repeat-x和repeat-y。
.example { background-image: url('background.png'); background-repeat: repeat-x; }
在這種情況下,背景圖像只在水平方向上重復,而不在垂直方向上重復。
.example { background-image: url('background.png'); background-repeat: repeat-y; }
在這種情況下,背景圖像只在垂直方向上重復,而不在水平方向上重復。
如果您不想使用平鋪的背景圖像,則可以使用background-repeat屬性的另一個選項:no-repeat。
.example { background-image: url('background.png'); background-repeat: no-repeat; }
在這種情況下,背景圖像只顯示一次,不會在元素內部平鋪。
CSS背景平鋪是在設計中非常常見的技術。通過使用background-repeat屬性,您可以輕松地將任何圖像平鋪以填充整個元素或僅在特定方向上重復。
下一篇php uid 字符