1、設置背景色

CSS提供background-color屬性設置頁面的背景色。

實例：background-color: red;

2、設置背景圖片

頁面添加圖片

語法： <img src=”pic.jpg”/>

頁面添加背景圖片

CSS提供background-image屬性直接為頁面添加一個背景圖片。

語法：background-image: url（pic.jpg）;

（1）背景圖片的平鋪

CSS提供background-repeat屬性設置背景圖片的平鋪方式。有四種屬性repeat（背景圖片在橫向和縱向上平鋪）、no-repeat（背景圖片不平鋪）、repeat-x（背景圖片在橫向上平鋪）、repeat-y（背景圖片在縱向上平鋪）。

語法：background-repeat: repeatmode;

（2）背景圖片的位置

CSS提供background-position屬性設置背景圖片與頁面的相對位置。

語法：background-position: position;

其中position可以使用長度單位、百分比、關鍵字來確定。

使用長度單位：background-position: 10px 20px;（背景圖片沿x軸平移10px，沿y軸平移20px）

使用百分比：background-position: 30% 30%;

使用關鍵字：background-position: right bottom; 屬性值橫向有left、center、right，縱向有top、center、bottom。

（3）固定和滾動背景圖片

CSS提供background-attachment屬性。屬性值scroll表示背景圖片隨對象內容滾動；fixed表示背景圖片固定。

實例：background-attachment: fixed；

3、頁面背景屬性

屬性background-image、background-position、background-repeat、background-attachment四個屬性可以使用background進行縮寫。

實例：background：url（pic.jpg） 10px 20px repeat fixed;

以上就是CSS頁面布局常用知識匯總（頁面背景）的詳細內容，更多請關注php中文網其它相關文章！