CSS3中的背景屬性讓我們可以輕松地為網頁添加背景。其中,利用background-size屬性可以讓背景圖全屏顯示,具體的實現方式如下:
body { background-image: url('bg.jpg'); background-size: cover; background-repeat: no-repeat; }
上面的代碼中,我們使用了一個背景圖片,并將其設置為全屏顯示。其中,background-size屬性的值為cover,指的是讓圖片等比例縮放,以充滿整個屏幕。同時,我們還可以設置background-repeat屬性來防止圖片重復。
除了使用單張背景圖片,我們還可以使用多張圖片來實現全屏背景:
body { background-image: url('bg1.jpg'), url('bg2.jpg'); background-size: cover; background-repeat: no-repeat, no-repeat; background-position: top left, top right; }
上述代碼利用了background-image屬性同時指定了兩張背景圖片,然后通過設置background-position屬性控制了圖片的位置,其中,top left表示第一張背景圖片顯示在頁面左上角,top right則表示第二張背景圖片顯示在右上角。
總的來說,利用CSS3的背景屬性可以為網頁帶來更加豐富的視覺效果,而全屏背景則是其中最常用的一種方式。