關于CSS中的背景圖像,大多數人都知道如何使其重復平鋪。但是,有時候我們可能需要將背景圖像設置為不平鋪。那么該怎么做呢?下面介紹兩種方法:
/* 方法一:使用background-repeat屬性 */ body { background-image: url('example.jpg'); background-repeat: no-repeat; background-size: cover; }
上述代碼中,我們設置了背景圖像的URL,并將background-repeat屬性設置為no-repeat,表示不進行平鋪。另外,由于設置了背景圖片的大小,我們需要將background-size屬性設置為cover,以使圖像充滿整個屏幕。
/* 方法二:使用background屬性 */ body { background: url('example.jpg') no-repeat center center fixed; background-size: cover; }
在上面的代碼中,我們使用了background屬性,這個屬性是background-image、background-repeat、background-position和background-size屬性的簡寫。其中,no-repeat表示不平鋪,center center fixed表示背景圖像水平和垂直居中,不隨滾動條滾動。而background-size屬性則與方法一中的代碼相同。
總之,不平鋪背景圖片有兩種方法,可以根據自己的情況選擇適合自己的方法進行設置。