背景 - BODY标签的颜色应用于整个HTML [重复]

This question already has an answer here:

这个问题在这里已有答案:

Applying a background to <html> and/or <body> 2 answers

将背景应用于和/或 2个答案

I am confused about size of body tag in html.

我对html中body标签的大小感到困惑。

I have a tough code as follows:

我有一个严格的代码如下:

<body>

</body>

 body{
        padding: 0px;
        height: 100px;
        background-color: #e5e5e5;
    }

Why does background cover all of the page?, I thought it should only cover 100px,

为什么背景会覆盖整个页面?我认为它应该只覆盖100px,

Please explain this for me, thank for your help!

请为我解释一下,谢谢你的帮助!

4 个解决方案

#1

This is indeed confusing, but it is specified in the CSS 2.1 specification, clause 14.2 Background: if the computed value of background-color is transparent and the computed value of background-image is none for the html element (as things are by default), browsers must instead use the computed value of the background properties for the body element and must not render a background for body (i.e. make it transparent). That is, body background magically turns to html background if html lacks a background of its own – and this only affects background properties, not the true height of the body element.

这确实令人困惑,但它在CSS 2.1规范中指定,第14.2节背景:如果background-color的计算值是透明的,并且html元素的background-image的计算值为none(默认情况下是这样) ,浏览器必须使用body元素的背景属性的计算值,并且不得渲染body的背景(即使其透明)。也就是说,如果html缺少自己的背景,身体背景会神奇地变成html背景 - 这只会影响背景属性,而不会影响body元素的真实高度。

I haven’t seen any rationale for this odd rule, which prescribes a kind of “reverse inheritance”. But it’s clearly specified in CSS 2.1 and applied by browsers.

我没有看到这个奇怪规则的任何理由,它规定了一种“反向继承”。但它在CSS 2.1中明确规定并由浏览器应用。

As explained in other answers, you can make your content have a background of specific height either by setting a background on html (so that body background is really applied to body only) or by using wrapper element inside body and setting height on it (since the special rule applies to body only).

正如在其他答案中所解释的那样,您可以通过在html上设置背景(使身体背景真正仅应用于身体)或通过在体内使用包装元素并在其上设置高度来使您的内容具有特定高度的背景(从特殊规则仅适用于身体)。

Thanks to Anne van Kesteren who pointed to the CSS spec when I asked about this in the WHATWG mailing list. (I thought I knew CSS 2.1 by heart but really didn’t. ☺)

感谢Anne van Kesteren,当我在WHATWG邮件列表中询问时,他指出了CSS规范。 (我以为我心里知道CSS 2.1,但实际上并没有。。)

#2

The body is a special HTML tag, and ordinarily covers the entire HTML page. Try the following:

正文是一个特殊的HTML标记,通常覆盖整个HTML页面。请尝试以下方法:

<body>
    <div id="content">
        Content goes here
    </div>
</body>

and the CSS to accompany it would be:

并伴随它的CSS将是:

body{
    /* whatever body related codes you'd like to use go here */
}

#content{
    padding: 0px;
    height: 100px;
    background-color: #e5e5e5;
}

#3

Many web developers do not understand the difference between applying style to the body element versus the html element. Most of the time these authors will apply style only to the body element; when that's not sufficient, they'll spam all sorts of styles on both html and body until the page happens to look correct.

许多Web开发人员不理解将样式应用于body元素与html元素之间的区别。大多数时候,这些作者只会将风格应用于身体元素;当这还不够时,他们会在html和body上发送各种样式的垃圾邮件,直到页面看起来正确为止。

The confusion is understandable. In the beginning, both were treated similarly, with attributes like background-color being applied to the body tag, affecting the whole page.

混乱是可以理解的。在开始时,两者的处理方式相似,背景颜色等属性应用于body标签,影响整个页面。

EDIT: To simplify thing i have added a fiddle to demonstrate how the background-color gets applied.So if you specify the background color for the body and you DONT want it to spread to the whole page you must specify the background-color for HTML too

编辑:为了简化的事情,我添加了一个小提琴,以演示如何应用背景颜色。所以,如果您指定正文的背景颜色,并且您不希望它传播到整个页面,您必须指定HTML的背景颜色太

FIDDLE

CSS

html{
    background-color:yellow;
}
body{
        padding: 0px;
        height: 100px;
        background-color: red;
    }

#4

You should explicitly specify a background color for the html tag (as browsers add it automatically), otherwise, the background of the body is spread all over the document.

您应该明确指定html标记的背景颜色(因为浏览器会自动添加它),否则,正文的背景遍布整个文档。

#1