CSS背景圖不重疊平鋪的方法

在CSS中，我們可以使用background-repeat屬性來控制背景圖的重復(fù)方式，如果不希望背景圖重疊平鋪，可以將background-repeat屬性設(shè)置為no-repeat，這樣背景圖就不會(huì)在水平和垂直方向上重復(fù)了。

假設(shè)你有一個(gè)HTML元素，其ID為myElement，你希望該元素的背景圖不重疊平鋪，可以這樣寫CSS代碼：

#myElement {
    background-image: url('your-image-url-here');
    background-repeat: no-repeat;
}

your-image-url-here是你的背景圖的URL地址，這樣設(shè)置后，#myElement元素的背景圖就不會(huì)重疊平鋪了。

如果你希望背景圖只在水平方向上重復(fù)，而在垂直方向上不重復(fù)，可以將background-repeat屬性設(shè)置為repeat-x；如果你希望背景圖只在垂直方向上重復(fù)，而在水平方向上不重復(fù)，可以將background-repeat屬性設(shè)置為repeat-y。

#myElement {
    background-image: url('your-image-url-here');
    background-repeat: repeat-x; /* 水平方向重復(fù)，垂直方向不重復(fù) */
}

或

#myElement {
    background-image: url('your-image-url-here');
    background-repeat: repeat-y; /* 垂直方向重復(fù)，水平方向不重復(fù) */
}