簡體   English   中英

當html標簽沒有設置背景顏色時,為什么身體背景圖像不包含在身體內?

[英]Why is the body background image not contained inside the body when the html tag has no background color set?

谷歌的404頁面使用邊距和填充來將內容集中在body標簽內,如下所示:

body {
    margin: 7% auto 0;
    max-width: 390px;
    min-height: 180px;
    padding: 30px 0 15px;
}

然后將破碎的機器人的圖像設置為身體標簽上的背景圖像並定位在右上方,使其顯示在主要內容的右側。

* > body {
    background: url(//www.google.com/images/errors/robot.png) 100% 5px no-repeat;
    padding-right: 205px;
}

html樣式如下所示:

html {
    background: #fff;
    color: #222;
    padding: 15px;
}

當刪除html標簽的背景顏色時,為什么圖像會出現在頁面的右上角?

html {
    //background: #fff;
    color: #222;
    padding: 15px;
}

破碎的plunkr例子

技術原因是“因為規范如此說明”:

但是,對於HTML文檔,我們建議作者指定BODY元素的背景而不是HTML元素。 對於其根元素為HTML“HTML”元素或XHTML“html”元素的文檔,其中“background-color”的計算值為“transparent”,而“background-image”的計算值為“none”,則用戶代理必須使用在為畫布繪制背景時,從該元素的第一個HTML“BODY”元素或XHTML“body”元素子元素計算背景屬性的值,並且不得為該子元素繪制背景。 如果僅為根元素繪制它們,那么這些背景也必須固定在同一點上。

這可能是因為在過去的糟糕時期,頁面的背景由body元素上的bgcolorbackground屬性決定,因此CSS與現有實踐“兼容”。

暫無
暫無

聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.

 
粵ICP備18138465號  © 2020-2024 STACKOOM.COM