版權(quán)說(shuō)明:本文檔由用戶提供并上傳,收益歸屬內(nèi)容提供方,若內(nèi)容存在侵權(quán),請(qǐng)進(jìn)行舉報(bào)或認(rèn)領(lǐng)
文檔簡(jiǎn)介
1、CSS背景顏色 背景圖片 居中 重復(fù) 固定樣式background經(jīng)驗(yàn)篇Background CSS背景圖片與CSS背景顏色樣式技術(shù)經(jīng)驗(yàn)篇我們使用CSS Background樣式屬性,可以設(shè)置網(wǎng)頁(yè)背景單一顏色、網(wǎng)頁(yè)背景為圖片、網(wǎng)頁(yè)背景圖片居中于網(wǎng)頁(yè)、網(wǎng)頁(yè)背景圖片網(wǎng)頁(yè)固定位置、網(wǎng)頁(yè)背景圖片中網(wǎng)頁(yè)中重復(fù)平鋪等css背景樣式介紹與案例講解。擴(kuò)展閱讀:CSS背景Background基礎(chǔ):背景顏色背景圖片目錄1. CSS背景background圖片2. CSS背景顏色3. 背景為顏色與為圖片總結(jié)一、CSS背景background圖片 1、背景圖片語(yǔ)法background-image
2、:url() 引入背景圖片background-repeat:no-repeat 設(shè)置背景圖片是否重復(fù)平鋪background-position:left top 設(shè)置圖片的css背景定位,left代表靠左,top代表靠上簡(jiǎn)寫背景圖片語(yǔ)法:background:url(圖片地址) no-repeat left top2、背景圖片設(shè)置Bodybackground:url( no-repeat 0 0 這里設(shè)置了圖片“3、CSS背景圖居中橫向居中:background:url(圖片地址) no-repeat center top縱向居中:background:url(圖片地址) no-repeat
3、 left 50%這里50%是隨意設(shè)置考上為50%距離,細(xì)節(jié)具體上下垂直居中需要再通過百分比均衡設(shè)置。4、背景圖片一般案例Body設(shè)置網(wǎng)頁(yè)背景css代碼bodybackground:url( no-repeat 0 0CSS圖片背景案例截圖不重復(fù)也不平鋪圖片背景截圖5、div css背景圖片居中Css背景圖片居中代碼:bodybackground:url( no-repeat center 0這里我們用了“center ”居中屬性,更多詳情可進(jìn)入css 背景了解基礎(chǔ)居中截圖背景圖片居中于網(wǎng)頁(yè)截圖6、背景圖片橫向平鋪CSS背景X橫向平鋪代碼:bodybackground:url( repeat-
4、x案例截圖:Y軸橫向平鋪圖片背景截圖7、背景圖片縱向平鋪CSS背景Y縱向平鋪代碼:bodybackground:url( repeat-y平鋪重復(fù)圖片背景效果截圖:縱向Y軸方向垂直平鋪圖片背景截圖8、全網(wǎng)頁(yè)背景圖片重復(fù)平鋪圖片背景全屏網(wǎng)頁(yè)重復(fù)平鋪關(guān)鍵代碼:bodybackground:url(截圖:圖片作為背景全屏平鋪顯示截圖說(shuō)明:這里沒有設(shè)置是否重復(fù),是否居左居右,只設(shè)置背景引入圖片即可簡(jiǎn)便地實(shí)現(xiàn)圖片自然全屏平鋪二、CSS背景顏色 1、background背景顏色語(yǔ)法background:#FFF.divcss5background:#FFF設(shè)置了divcss5對(duì)象背景為白色2、
5、背景顏色案例假如我們?cè)O(shè)置網(wǎng)頁(yè)背景全部為白色,文字顏色為白色1)、對(duì)應(yīng)背景顏色CSS代碼與HTML源代碼:1. <!DOCTYPE html> 2. <html> 3. <head> 4. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 5. <title>無(wú)標(biāo)題文檔</title> 6. <
6、;style> 7. bodybackground:#000; color:#FFF 8. </style> 9. </head> 10. <body> 11. DIVCSS5 背景為黑色;文字顏色為白色 12. </body> 13. </html> 2)、背景顏色與文字顏色案例截圖CSS設(shè)置背景顏色與CSS字體顏色如果想了解CSS背景顏色與CSS圖片背景同時(shí)設(shè)置background基礎(chǔ)進(jìn)入:三、背景為顏色與為圖片總結(jié) 我們使用css backgrou
溫馨提示
- 1. 本站所有資源如無(wú)特殊說(shuō)明,都需要本地電腦安裝OFFICE2007和PDF閱讀器。圖紙軟件為CAD,CAXA,PROE,UG,SolidWorks等.壓縮文件請(qǐng)下載最新的WinRAR軟件解壓。
- 2. 本站的文檔不包含任何第三方提供的附件圖紙等,如果需要附件,請(qǐng)聯(lián)系上傳者。文件的所有權(quán)益歸上傳用戶所有。
- 3. 本站RAR壓縮包中若帶圖紙,網(wǎng)頁(yè)內(nèi)容里面會(huì)有圖紙預(yù)覽,若沒有圖紙預(yù)覽就沒有圖紙。
- 4. 未經(jīng)權(quán)益所有人同意不得將文件中的內(nèi)容挪作商業(yè)或盈利用途。
- 5. 人人文庫(kù)網(wǎng)僅提供信息存儲(chǔ)空間,僅對(duì)用戶上傳內(nèi)容的表現(xiàn)方式做保護(hù)處理,對(duì)用戶上傳分享的文檔內(nèi)容本身不做任何修改或編輯,并不能對(duì)任何下載內(nèi)容負(fù)責(zé)。
- 6. 下載文件中如有侵權(quán)或不適當(dāng)內(nèi)容,請(qǐng)與我們聯(lián)系,我們立即糾正。
- 7. 本站不保證下載資源的準(zhǔn)確性、安全性和完整性, 同時(shí)也不承擔(dān)用戶因使用這些下載資源對(duì)自己和他人造成任何形式的傷害或損失。
最新文檔
- 江蘇省揚(yáng)州市2024-2025學(xué)年高二(上)學(xué)業(yè)水平合格性模擬考試物理試卷(含答案)
- 河北省衡水市2024-2025學(xué)年高三上學(xué)期期末物理試題(無(wú)答案)
- 2022年高考物理大一輪總復(fù)習(xí)(江蘇專版-)題庫(kù)-第二章-相互作用-第2課時(shí)
- 安徽省合肥第四十六中學(xué)2024-2025學(xué)年九年級(jí)第一學(xué)期12月份月考語(yǔ)文試卷(含答案)
- 【KS5U原創(chuàng)】新課標(biāo)2021年高二物理暑假作業(yè)5《恒定電流二》
- 2021貴陽(yáng)市高考英語(yǔ)閱讀、閱讀表達(dá)一輪自練題(5)-及答案
- 四年級(jí)數(shù)學(xué)(除數(shù)是兩位數(shù))計(jì)算題專項(xiàng)練習(xí)及答案
- 【全程復(fù)習(xí)方略】2021年春高中物理選修3-4-課時(shí)達(dá)標(biāo)·效果檢測(cè)-12.2-波的圖像
- 2022部編版四年級(jí)語(yǔ)文下冊(cè)全冊(cè)一課一練同步練習(xí)(有答案)+知識(shí)點(diǎn)歸納
- 2025年0096北京美欣科技有限公司
- 2024年醫(yī)院副院長(zhǎng)工作總結(jié)范文(2篇)
- UL1017標(biāo)準(zhǔn)中文版-2018吸塵器UL中文版標(biāo)準(zhǔn)
- 生物安全柜的使用及維護(hù)培訓(xùn)
- 【MOOC】診斷學(xué)-山東大學(xué) 中國(guó)大學(xué)慕課MOOC答案
- 《NOIP圖的基礎(chǔ)算法》課件
- 人體寄生蟲表格總結(jié)超全(原蟲部分)
- 《建筑工程QC課題》課件
- 病歷質(zhì)控流程
- 合作投資酒店意向合同范例
- 2024年度新能源汽車充電物流合同
- 2024年學(xué)校意識(shí)形態(tài)工作總結(jié)模版(3篇)
評(píng)論
0/150
提交評(píng)論