.jpg)
網(wǎng)頁(yè)設(shè)計(jì)中設(shè)置頁(yè)面背景的方法主要有背景顏色、背景圖片及兩者結(jié)合使用。首先設(shè)置背景顏色可用 css 的 background-color 屬性，支持顏色名稱、rgb、hsl 或十六進(jìn)制值，適合簡(jiǎn)潔風(fēng)格；其次設(shè)置背景圖片通過(guò) background-image 屬性，并配合 background-repeat、background-size、background-position 和 background-attachment 等屬性優(yōu)化顯示效果；最后可同時(shí)使用背景顏色與圖片，利用 rgba 顏色疊加半透明層或簡(jiǎn)寫屬性實(shí)現(xiàn)遮罩效果以增強(qiáng)可讀性，適用于圖文內(nèi)容較多的頁(yè)面。
設(shè)置頁(yè)面背景是網(wǎng)頁(yè)設(shè)計(jì)中最基礎(chǔ)也最常用的操作之一，主要可以通過(guò)設(shè)置背景顏色或背景圖片來(lái)實(shí)現(xiàn)。html 本身不直接控制樣式，而是通過(guò) css 來(lái)完成這些設(shè)置。下面我們就來(lái)看看具體怎么操作。
設(shè)置背景顏色
背景顏色是最簡(jiǎn)單的頁(yè)面背景設(shè)置方式，適用于大多數(shù)需要簡(jiǎn)潔風(fēng)格的網(wǎng)站。
要設(shè)置背景顏色，可以使用 CSS 的 background-color 屬性：
立即學(xué)習(xí)“前端免費(fèi)學(xué)習(xí)筆記（深入）”；
body { background-color: #f0f0f0; }
你也可以使用顏色名稱（如 red、blue）、RGB 值（如 rgb(255, 0, 0)）或 HSL 值（如 hsl(0, 100%, 50%)）。
小技巧：淺灰色背景（比如 #f5f5f5）通常比純白更柔和，適合正文閱讀類網(wǎng)站。
設(shè)置背景圖片
如果想讓頁(yè)面看起來(lái)更生動(dòng)，可以用背景圖片。設(shè)置方法也很簡(jiǎn)單，用的是 background-image 屬性：
body { background-image: url('bg.jpg'); }
這里 ‘bg.jpg’ 是你的圖片路徑，可以是相對(duì)路徑或者絕對(duì) URL。
不過(guò)只加圖片還不夠，通常還需要配合其他屬性調(diào)整顯示效果，比如：
- background-repeat: 控制圖片是否重復(fù)，默認(rèn)是平鋪。
- background-size: 可以設(shè)為 cover 讓圖片自適應(yīng)屏幕大小。
- background-position: 設(shè)置圖片起始位置，常用 center。
- background-attachment: 設(shè)置滾動(dòng)方式，比如固定不動(dòng)（fixed）。
例如完整寫法：
body { background-image: url('bg.jpg'); background-repeat: no-repeat; background-size: cover; background-position: center; background-attachment: fixed; }
這樣就能做出一個(gè)視覺(jué)上比較舒服的全屏背景圖了。
背景顏色與圖片同時(shí)使用
有時(shí)候我們希望在有背景圖的基礎(chǔ)上再疊加一層顏色，增強(qiáng)對(duì)比度或遮罩效果。這時(shí)候可以用 background 簡(jiǎn)寫屬性，也可以使用 rgba 顏色來(lái)疊加半透明層。
舉個(gè)例子：
body { background-image: url('bg.jpg'); background-color: rgba(255, 255, 255, 0.5); /* 白色半透明 */ background-blend-mode: lighten; /* 混合模式可選 */ }
這種方式適合文字內(nèi)容較多的頁(yè)面，可以讓文字更清晰易讀。
基本上就這些設(shè)置方式了。背景顏色和圖片的搭配其實(shí)挺靈活，關(guān)鍵是根據(jù)網(wǎng)站主題選擇合適的配色和圖片風(fēng)格，別太花哨就行。
.png)
