溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
這篇文章主要介紹CSS頁面布局中設置頁面背景的知識點有哪些，文中介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們一定要看完！
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頁面布局中設置頁面背景的知識點有哪些”這篇文章的所有內容，感謝各位的閱讀！希望分享的內容對大家有幫助，更多相關知識，歡迎關注億速云行業資訊頻道！
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
