將背景應(yīng)用于<html>和/或<body>http://jsfiddle.net/julien_c/GmAL4/我發(fā)現(xiàn)如果你把CSS背景應(yīng)用到body，它占用整個(gè)頁面(不管實(shí)際高度或?qū)挾仁嵌嗌?。body)。但是，如果將css背景應(yīng)用于兩者h(yuǎn)tml和body的背景body 不會(huì)占用整頁.這是預(yù)期的差異行為嗎？我該如何疊加兩個(gè)全屏背景(例如，背景顏色和半透明圖像？)
2 回答
隔江千里
TA貢獻(xiàn)1906條經(jīng)驗(yàn) 獲得超10個(gè)贊
body, htmlhtmlbodyhtml
根元素的背景成為畫布的背景，其背景繪制區(qū)域擴(kuò)展到覆蓋整個(gè)畫布，盡管任何圖像的大小和位置都相對(duì)于根元素，就好像它們是單獨(dú)為該元素繪制的一樣。(換句話說，背景定位區(qū)域是為根元素確定的。)如果根的“背景顏色”值是“透明的”，則畫布的背景色依賴于UA。根元素不會(huì)再次繪制此背景，即其背景的使用值是透明的。
對(duì)于根元素為HTML的文檔 HTML元素或XHTML html元素：如果根元素上的“背景-圖像”的計(jì)算值為“無”，且其“背景色”為“透明”，則用戶代理必須從該元素的第一個(gè)HTML中傳播背景屬性的計(jì)算值。 BODY或XHTML body子元素的使用值 BODY元素的背景屬性是它們的初始值，傳播的值被視為是在根元素上指定的。建議HTML文檔的作者為 BODY元素而不是 HTML元素。
htmlbodybackground-colorbackground-imagebackground
body {
background: #ddd url(background.png) center top no-repeat;}在CSS 2中，這兩個(gè)元素的樣式都很有用：只需將背景圖像設(shè)置為 html和另一張圖片 body你想把它加在第一個(gè)上面。以確保背景圖像在 body以完全視口高度顯示，您需要應(yīng)用 height和 min-height此外，還分別： html { height: 100%; background: #ddd url(background1.png) repeat;}body { min-height: 100%; background: transparent url(background2.png) center top no-repeat;}順便提一下，為什么你必須指定 height和 min-height到 html和 body分別是因?yàn)閮蓚€(gè)元素都沒有任何內(nèi)在的高度。兩者都是 height: auto默認(rèn)情況下。它的視口有100%的高度，所以 height: 100%從viewport中取出，然后應(yīng)用于 body作為允許滾動(dòng)內(nèi)容的最低限度。 在CSS 3中，語法已經(jīng)擴(kuò)展，所以您可以 在單個(gè)屬性中聲明多個(gè)背景值 ，消除了將背景應(yīng)用于多個(gè)元素(或調(diào)整)的需要。 height/min-height):body { background: url(background2.png) center top no-repeat, #ddd url(background1.png) repeat;}唯一的警告是，在一個(gè)單一的多層背景，只有最底層可能有一個(gè)背景顏色。在這個(gè)例子中，您可以看到 transparent值從上層丟失。 不要擔(dān)心-即使您使用多層背景，上面與傳播背景值一起指定的行為也完全一樣。
bodyhtml
1 backgroundbgcolorbody
添加回答
舉報(bào)
0/150
提交
取消