您現在的位置是:電腦技術吧?>? 故障問題 ??>??body背景圖片,給body加背景圖片??>??正文詳情

body背景圖片,給body加背景圖片

狂文君2019-11-05 07:51:13 人圍觀
簡介html設置body背景圖片在css布局中,有時可能會遇到將圖像直接設置為web頁面的背景以進行水平和垂直平鋪(從上到下到中心)的情況。此時,無論整個網頁的內容是否占據全屏,css的背景

在CSS布局時,可能有時會遇到對body直接設置圖片作為網頁背景水平縱向平鋪(從上到下居中平鋪),此時整個網頁無論內容是否占滿一屏幕,css背景都會從上到下鋪(縱向)滿整個屏幕。

但有時我們不需要這樣的一個效果,需要內容占用多高,body背景就縱向從上到下鋪滿多少高度。

很明顯這樣就達不到我們想要的效果。

解決方法:對html再設置個背景(無論圖片還是純色,推薦設置純顏色的背景顏色)接下來DIVCSS5通過實例為大家介紹此技巧,首先DIVCSS5分為兩個案例,一個是直接對body設置背景圖片從上到下平鋪,我們會觀察到無論網頁內容是否占滿一屏幕,背景都會從上到下滿鋪。

一、未解決背景縱向平鋪CSS DIV案例 - TOP1、DIV CSS案例描述首先對body設置一個背景圖片(bg.gif)從上到下平鋪,設置一個div盒子寬度為274px,高度為200px;div背景顏色為藍色。

2、案例HTML源代碼:!DOCTYPEhtmlhtmlheadmetahttp-equiv=Content-Typecontent=text/html;charset=utf-8/titleCSS案例在線演示DIVCSS5/titlelinkhref=images/style.cssrel=stylesheettype=text/css/!--www.divcss5.com--/headbodydivclass=divboxDIVCSS5實例內容/div/body/html3、案例CSS代碼:@charsetutf-8;/*DIVCSS5-CSS初始化模板-www.divcss5.com*/body,div{margin:0;padding:0;font-style:normal;font:12px/22px5B8B4F53,Arial,Helvetica,sans-serif}/*5B8B4F53代表宋體,更多中文字體轉Unicodehttp://www.divcss5.com/jiqiao/j325.shtml*/ol,ul,li{list-style:none}body{color:#FFF;background:#E2E2E2url(bg.gif)repeat-ycenter0;text-align:center}.divbox{margin:0auto;width:274px;height:200px;background:#00F}4、實例截圖對body設置縱向平鋪背景圖片顯示案例截圖從以上圖上看到對body設置背景圖片從上到下縱向平鋪時,無論內容是否占滿1屏幕,其背景都會從上到下都會平鋪滿整個屏幕,此時就不那么好看了,接下來第二個案例在此基礎上進行解決背景隨內容占用多個顯示多個平鋪圖片背景。

5、在線演示:查看案例二、解決內容多高body設置背景圖片平鋪顯示多高 - TOP1、解決說明我們只需要在CSS代碼中對html加一個背景色即可,當然這個背景設置需要根據布局實際情況而設置,這里因為背景顏色為#E2E2E2,此時我們就只需要對html設置一個CSS背景色為#E2E2E2即可解決實現完美背景圖片縱向從上到下平鋪問題。

2、CSS代碼:@charsetutf-8;/*DIVCSS5-CSS初始化模板-www.divcss5.com*/body,div{margin:0;padding:0;font-style:normal;font:12px/22px5B8B4F53,Arial,Helvetica,sans-serif}/*5B8B4F53代表宋體,更多中文字體轉Unicodehttp://www.divcss5.com/jiqiao/j325.shtml*/ol,ul,li{list-style:none}html{background:#E2E2E2}/*CSS注釋說明:對html設置背景顏色*/body{color:#FFF;background:#E2E2E2url(bg.gif)repeat-ycenter0;text-align:center}.divbox{margin:0auto;width:274px;height:200px;background:#00F}3、案例截圖解決body背景圖片縱向平鋪內容占多高背景圖片顯示多高

版權聲明:本文由 狂文君 整理編輯。

原標題:body背景圖片平鋪,設置body背景圖片

轉載注明出處:http://www.dn9ww09s.icu/fault/11108.html

文章評論

    共有條評論來說兩句吧...

    用戶名:

    驗證碼:

作者推薦

  • 網頁如何設置自動刷新,瀏覽器怎么設置自動刷新網頁

    網頁如何設置自動刷新,瀏覽器怎么設置自動刷新網頁 相關圖片如何設置自動刷新有時我們需要不斷刷新網頁例如,買票時,手動刷新總是很慢很費力。如果您可以將瀏覽器設置為自動刷新,那么現在讓我們告訴您瀏覽器確實具有此功能接下來,編...

  • 為什么steam打不開,steam打不開了

    為什么steam打不開,steam打不開了 相關圖片steam官網打不開STEAM是一個銷售游戲軟件的平臺。它賣的所有游戲都是正版的。但是當我們打開它的時候,會出現一些情況,比如蒸汽不能打開它的問題。我們怎樣才能解決這個問題接下...

  • 言過其實,言過其實的人

    言過其實,言過其實的人 相關圖片言過其實指誰HTML5什么時候開始吸引越來越多的人盡管W3C說它的最終成熟還有很長的路要走,但它不能阻止人們對它的期望2007年,HTML5進入了W3C標準HTML5的使命言過其實指的是...

  • 顯卡筆記本,筆記本電腦顯卡排名圖

    顯卡筆記本,筆記本電腦顯卡排名圖 相關圖片筆記本電腦顯卡伙計們,編輯今天不會告訴你們“教科書概念”。這是另一種“安利解釋”。哈哈哈~今天安利的主題是一些筆記本顯卡的排名介紹。當你買電腦的時候,你可以選擇一種...

  • 網站開發教程,app開發教程

    網站開發教程,app開發教程 相關圖片android開發菜鳥教程雖然HTML5技術還不夠成熟,仍在不斷的改進和發展中,但它的許多先進和強大之處是有目共睹的。為了幫助您更好地學習html5,本文將與您分享25個優秀的html5自學小程...

  • 迅雷速度越來越慢,為什么迅雷這么慢

    迅雷速度越來越慢,為什么迅雷這么慢 相關圖片手機迅雷速度突然變慢很多用戶使用迅雷下載,這是目前應用廣泛的下載軟件。有時由于設置不當,會影響迅雷的下載速度,下載速度突然變得很慢。我該怎么辦?有沒有辦法提高迅雷...

  • contentEditable,content

    contentEditable,content 相關圖片php editablecontentable是枚舉類型屬性。可選值為空字符串、true、false或inherit(默認值)當它是空字符串時,效果與true相同當元素的可滿足狀態為tcontent屬性什么用...

  • 手機無線網絡連接不上,手機連接wifi不能上網

    手機無線網絡連接不上,手機連接wifi不能上網 相關圖片為什么wifi連接上卻不能上網事實上,當我們的手機連接到無線網絡時,也會出現問題。例如,移動電話無線網絡已連接,但無法連接到網絡。它顯然是相連的,但不能使用。就是這樣所...

  • 等比縮小怎么算的,等比放大怎么算

    等比縮小怎么算的,等比放大怎么算 相關圖片ps怎么等比放大這種效果要求每個item元素的高度是寬度的兩倍。首先,父元素框將寬度設置為100%。這里我們主要使用padding屬性來解決這個問題,因為如果padding的寬ps等比縮小...

  • fn鍵有什么用,fn鍵沒反應

    fn鍵有什么用,fn鍵沒反應 相關圖片電腦fn鍵在哪里我們通常使用的鍵盤上的每一個鍵都有自己的作用。一些鍵可以與其他鍵組合以形成新的鍵以供使用所以,今天的編輯將告訴你如何使用鍵盤上的fn鍵。FN的全稱是functit...

熱評文章

  • 刪除頑固文件夾,頑固文件夾刪除又生成

    刪除頑固文件夾,頑固文件夾刪除又生成 相關圖片文件夾刪除后又出現小編遇到過這樣的問題刪除要刪除的文件后,她發現這些文件沒有完全刪除。最后,需要一點時間來解決它所以今天小編就和大家分享如何刪除那些無法刪除的頑固...

  • 日歷圖標,日歷圖標顯示當天日期

    日歷圖標,日歷圖標顯示當天日期 相關圖片華為日歷圖標不顯示日期今天我將向你展示如何用css的方式創建一個日歷圖標。你可以在博客文章或其他地方使用它我自己學的,但效果是圖片級的。正如書名中提到的,這不是炫耀技...

  • 打印機一直卡紙,打印機為什么卡紙

    打印機一直卡紙,打印機為什么卡紙 相關圖片打印機顯示卡紙我們經常滿足使用打印機的需要,但在使用打印機時,我們經常遇到一個問題,即打印機卡紙。我們應該如何處理這種現象?別慌今天小編將教你如何解決打印機卡紙的...

  • WIN鍵,win鍵用不了

    WIN鍵,win鍵用不了 相關圖片鍵盤上的windows鍵在哪當我們打開跑步窗口時,我們習慣于點擊鍵盤上的“win r”來打開它。但贏球的關鍵是什么?鍵盤上是什么鍵今天,小編會告訴你哪一個是關鍵贏家我寫了那么多教...

  • 渲染速度,渲染速度和什么有關

    渲染速度,渲染速度和什么有關 相關圖片3d影響渲染速度的一盡量避免由于不同瀏覽器對HTML標記的解釋不同,最終的web頁面效果在不同瀏覽器中可能有所不同為了消除這種風險,設計人員通常在css的開頭去掉所有標簽的默認屬...

  • 怎么計算電腦電源功耗,電腦電源功耗計算

    怎么計算電腦電源功耗,電腦電源功耗計算 相關圖片功率計算機如果計算機只需要400W的電源,即使使用1200W的電源,也無法提高其性能我們需要什么樣的電源按照“夠用就好”的原則買權其實是最合理的。有辦法測量用電量嗎現在,電腦...

  • 八卦,什么是八卦

    八卦,什么是八卦 相關圖片八卦卦象你知道世界上第一個reset.css在哪里嗎?*{邊距:0;邊距:0}個性不好?埃里克·邁耶和你是情侶嗎?谷歌使用reset.css嗎?誰是不重置css的口號先天八卦和后天八卦...

  • cr2用什么打開,cr2文件如何打開

    cr2用什么打開,cr2文件如何打開 相關圖片電腦如何打開cr2佳能相機,這是一段時間。因為我記得我在學校的時候,佳能相機的廣告每天都出現在電視上,那時我覺得很酷但現在它很受歡迎。今天,我想告訴你如何打開佳能相機...

  • 怎么使表格居中,怎么使文字居中

    怎么使表格居中,怎么使文字居中 相關圖片怎么使表格里的字居中主要樣式定義如下:body{text align:center;}{center{margin right:auto;margin left:auto;}描述:在html5中如何使表格居中...

  • word文檔目錄怎么自動生成,word文檔目錄怎么自動生成頁碼

    word文檔目錄怎么自動生成,word文檔目錄怎么自動生成頁碼 相關圖片word文檔目錄word是我們常用的文本編輯器。學習word的一些基本操作,使辦公更加方便。當我們通常寫文章或論文時,為了方便,在搜索時很容易找到由文章生成的目錄如何生成目錄現w...

關注微信

变脸官网查询