應用背景，以<html>和/或<body>

http://jsfiddle.net/julien_c/GmAL4/應用背景，以<html>和/或<body>

我發現，如果你應用CSS背景body，它佔據了整個頁面（不管的body實際高度或寬度是什麼）。

但是，如果應用CSS背景既html和body，爲body背景不佔據整個頁面。

這是不符合預期的行爲？

我怎麼會去疊加兩個全屏背景（比如，背景色和半透明圖像？）

來源

2012-06-08 julien_c

[與HTML應用css規則相比身體有什麼區別？]（http：// stackoverflow。com/questions/6739601 /應用css-rules-to-html-comparative-to-body之間的區別是什麼 –

這是correct behavior。 body並不立即佔據視口的整個高度，儘管當你只對後者應用背景時看起來如此。事實上，html元素將採取的body背景，如果你不給它自己的背景，以及html將這個消息傳給其他視口：

根元素的背景成爲背景畫布及其背景繪畫區域延伸至覆蓋整個畫布，但是任何圖像的大小和位置都相對於根元素，就好像它們是爲單獨的元素繪製的一樣。（換句話說，背景定位區域是根元素確定的。）如果根的'背景顏色'值是'透明'，則畫布的背景顏色與UA相關。根元素不會再次繪製該背景，即其背景的使用值是透明的。

對於其根元素爲HTML HTML元素或XHTML html元素的文檔：如果根元素上'background-image'的計算值爲'none'且其'background-color'爲'transparent'，用戶代理必須改爲從該元素的第一個HTML元素的第一個HTML BODY或XHTML body傳播計算出的背景屬性值。 BODY元素的背景屬性的使用值是它們的初始值，並將傳播的值視爲在根元素上指定的值。建議HTML文檔的作者指定BODY元素的畫布背景，而不是HTML元素。

但是，儘管如此，你可以在一個單獨的元素背景顏色疊加任何背景圖像（無論是html或body），而不必依賴於兩個元素 - 簡單地使用background-color和background-image或將它們組合background簡寫屬性：

body { 
    background: #ddd url(background.png) center top no-repeat; 
}

如果要合併兩個背景圖像，你需要依靠多背景。有主要兩天做到這一點：

CSS2中，這是在造型這兩個元素就派上用場了：只需設置一個背景圖像html和其他圖像，你要疊加在第一body。爲了確保body顯示器在全視口高度的背景圖片，你需要分別申請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兩個元素都沒有任何固有的高度默認情況下，兩者都是height: auto。視口的高度爲100％，因此height: 100%取自視口，然後至少應用於body以允許滾動內容。
在CSS3，語法已擴展，以便可以declare multiple background values in a single property，消除了需要應用背景的多個元素（或調整height/min-height）：
```
body { 
    background: url(background2.png) center top no-repeat, 
       #ddd url(background1.png) repeat; 
} 
```
唯一要注意的是，在一個單一的多層背景，只有最底層可能有背景色。您可以在此示例中看到transparent值從上層丟失。

而且不用擔心 - 上面傳播背景值所指定的行爲有效，即使你用多層次的背景一模一樣。

但是，如果您需要支持舊瀏覽器，則需要使用CSS2方法，該方法一直支持IE7。

我this other answer下注釋說明，與隨行fiddle，如何body從html默認的利潤率實際上抵消，即使它看起來像是被填補了，而不是再次因爲這個看似奇怪的現象。

_{這可能會對它的根在設定HTML的bodybackground和bgcolor屬性引起的背景屬性適用於整個視口。更多關於here。}

來源

2012-06-08 11:01:35 BoltClock

你能否提供與此相關的W3C規範參考，所以你的答案成爲事實並且不是一種猜測？ –

@Robert Koritnik：嘿，對不起。快速的連續編輯是我滾動的方式。現在應該更完整。 – BoltClock

感謝您的參考。我沒有得到你最後的評論（疊加技巧）。你會如何疊加兩個全屏幕背景？ –

本質上，在不存在html元件上的background的，所述bodybackground將覆蓋頁面。如果html元素上有background，則bodybackground的行爲與其他元素的行爲相同。

來源

2018-01-30 20:19:56 eosimosu

應用背景，以<html>和/或<body>

回答

相關問題