CSS中的背景屬性background可以設置圖片作為背景,使用背景圖片可以增強網頁的視覺效果。但是圖片默認是平鋪的,有時候我們需要讓圖片不平鋪,以達到更好的效果。
在CSS中,我們可以使用background-repeat屬性來控制背景圖片的重復方式。默認值是repeat,即平鋪。如果我們想讓背景圖片不平鋪,就可以設置為no-repeat。
body { background: url("beijing.jpg") no-repeat; }
上面的代碼中,我們設置了body元素的背景圖片為“beijing.jpg”,并且將background-repeat設置為no-repeat,從而達到不平鋪的效果。
當然,如果我們想要背景圖片在頁面中居中并且不平鋪,我們還可以設置背景圖片的位置。使用background-position屬性可以控制背景圖像的位置,它的值可以是像素值、百分比值,或者是關鍵字值。常用的關鍵字有center,表示居中對齊。
body { background: url("beijing.jpg") no-repeat center center fixed; background-size: cover; }
上面的代碼中,我們設置了body元素的背景圖片為“beijing.jpg”,并且將background-repeat設置為no-repeat,background-position設置為居中對齊。此外我們還設置了background-size為cover,以使圖片大小適應整個頁面屏幕的大小。
以上就是如何讓背景圖片不平鋪的方法,通過設置background-repeat和background-position可以輕松實現。希望對您有所幫助!
上一篇vue普通的post
下一篇css 動畫移除保留樣式