在CSS中,有一種背景拉伸鋪滿屏的方法,下面我們來了解一下。
body { background-image: url('background.jpg'); background-size: cover; background-repeat: no-repeat; }
上面的代碼中,我們設置了一個背景圖片,并使用了background-size屬性設置背景拉伸方式為cover。
該屬性值可以選擇:cover、contain、auto、length、percentage等,其中cover表示背景圖片鋪滿元素,需按比例縮放,并覆蓋整個元素。而no-repeat則表示不重復圖片。
除此之外,我們還可以使用background-position屬性設置背景位置,從而達到更好的視覺效果。
body { background-image: url('background.jpg'); background-size: cover; background-repeat: no-repeat; background-position: top center; }
通過設置為top center,背景圖片將在縱向上靠近元素頂部,并在橫向上居中。
使用這種方法可以使背景圖片完美地鋪滿整個屏幕,為網(wǎng)頁增添視覺美感。
下一篇css背景無重復