CSS頁面設(shè)置背景的方法有很多種,我們可以使用background-image屬性來設(shè)置背景圖片,也可以使用background-color屬性來設(shè)置背景色。下面我們將逐一講解這些方法。
body { background-image: url(background.jpg); }
使用background-image屬性來設(shè)置背景圖片時,我們需要指定圖片的路徑。上面的代碼就是將文件夾中的background.jpg作為背景圖片顯示在頁面中。
body { background-color: #f1f1f1; }
如果我們希望設(shè)置純色背景,可以使用background-color屬性。上面的代碼將頁面的背景顏色設(shè)置為淺灰色。
body { background: url(background.jpg) no-repeat center center fixed; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover; }
除了上述兩種方式,我們還可以使用簡寫屬性background來設(shè)置背景圖片。該屬性可以同時設(shè)置背景圖片、位置、重復方式等。上面的代碼中,我們使用了一些附加屬性來使背景圖片在不同瀏覽器中顯示效果更佳。
無論是什么方法,設(shè)置CSS頁面背景都可以幫助我們實現(xiàn)更炫酷的布局。