這篇文章主要介紹CSS頁面布局中設(shè)置頁面背景的知識點(diǎn)有哪些，文中介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們一定要看完！

做網(wǎng)站、成都做網(wǎng)站的關(guān)注點(diǎn)不是能為您做些什么網(wǎng)站，而是怎么做網(wǎng)站，有沒有做好網(wǎng)站，給創(chuàng)新互聯(lián)一個展示的機(jī)會來證明自己，這并不會花費(fèi)您太多時間，或許會給您帶來新的靈感和驚喜。面向用戶友好，注重用戶體驗(yàn)，一切以用戶為中心。

1、設(shè)置背景色

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

實(shí)例：background-color: red;

2、設(shè)置背景圖片

頁面添加圖片

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

頁面添加背景圖片

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

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

（1）背景圖片的平鋪

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

語法：background-repeat: repeatmode;

（2）背景圖片的位置

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

語法：background-position: position;

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

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

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

使用關(guān)鍵字：background-position: right bottom; 屬性值橫向有l(wèi)eft、center、right，縱向有top、center、bottom。

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

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

實(shí)例：background-attachment: fixed；

3、頁面背景屬性

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

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

以上是“CSS頁面布局中設(shè)置頁面背景的知識點(diǎn)有哪些”這篇文章的所有內(nèi)容，感謝各位的閱讀！希望分享的內(nèi)容對大家有幫助，更多相關(guān)知識，歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道！

網(wǎng)站題目：CSS頁面布局中設(shè)置頁面背景的知識點(diǎn)有哪些
分享路徑：http://www.chinadenli.net/article36/ihossg.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供企業(yè)建站、網(wǎng)站導(dǎo)航、響應(yīng)式網(wǎng)站、微信公眾號、外貿(mào)網(wǎng)站建設(shè)、商城網(wǎng)站

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會在第一時間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時需注明來源： 創(chuàng)新互聯(lián)