本文目錄導(dǎo)讀：

1. 設(shè)置背景圖片不重復(fù)
2. 設(shè)置背景圖片只重復(fù)一次
3. 設(shè)置背景圖片水平重復(fù)
4. 設(shè)置背景圖片垂直重復(fù)

取消圖片平鋪的CSS方法

在CSS中，我們可以使用background-repeat屬性來取消圖片的平鋪。background-repeat屬性用于設(shè)置背景圖片的重復(fù)方式。

設(shè)置背景圖片不重復(fù)

我們可以通過將background-repeat屬性設(shè)置為no-repeat來使背景圖片不重復(fù)。

div {
    background-image: url('image.jpg');
    background-repeat: no-repeat;
}

在上面的代碼中，div元素的背景圖片設(shè)置為image.jpg，并且不會重復(fù)。

設(shè)置背景圖片只重復(fù)一次

我們還可以將background-repeat屬性設(shè)置為repeat，這樣背景圖片只會重復(fù)一次。

div {
    background-image: url('image.jpg');
    background-repeat: repeat;
}

在上面的代碼中，div元素的背景圖片設(shè)置為image.jpg，并且只會重復(fù)一次。

設(shè)置背景圖片水平重復(fù)

我們還可以將background-repeat屬性設(shè)置為repeat-x，這樣背景圖片只會水平重復(fù)。

div {
    background-image: url('image.jpg');
    background-repeat: repeat-x;
}

在上面的代碼中，div元素的背景圖片設(shè)置為image.jpg，并且只會水平重復(fù)。

設(shè)置背景圖片垂直重復(fù)

我們還可以將background-repeat屬性設(shè)置為repeat-y，這樣背景圖片只會垂直重復(fù)。

div {
    background-image: url('image.jpg');
    background-repeat: repeat-y;
}

在上面的代碼中，div元素的背景圖片設(shè)置為image.jpg，并且只會垂直重復(fù)。