画布背景和HTML <body>元素

Mor*_*ori 14 html css specifications background

根据规格:

建议HTML文档的作者指定BODY元素的画布背景而不是HTML元素.

但它没有说它有什么优势.为什么规范推荐这个?

PS当我看到额外的滚动条时身体高度为100vh时,它突然出现在我的脑海中:是不是简单地将背景赋予html元素呢?

Bol*_*ock 13

之前CSS,通过加入特定的背景backgroundbgcolor属性到body元件在HTML(与喜欢沿text,link,alink,vlink,leftmargin,marginwidth,topmarginmarginheight).

符合CSS的浏览器将这些表示属性转换为适当的样式规则,作为作者级表示提示放置,其优先级低于作者级*规则.有关css-cascade-3HTML的更多信息.即,background和元素分别bgcolor转换为元素background-imagebackground-color声明body.

因此,建议作者为body元素而不是html元素指定画布背景,以便于将遗留HTML文档从body元素上的表示属性迁移到CSS.通常,如果您同时控制了标记和CSS,那么您可能想要做的第一件事就是摆脱表示属性.但你不具备这样做了蝙蝠的权利; 您只需添加一个background特定于该body元素的声明,它将无缝替换由表示属性指定的整个页面背景(如问题中的spec链接所述),无需进一步操作:

/* The bgcolor attribute is equivalent to a

body {
  background-color: #FFFFFF;
}

rule at this position in the stylesheet,
except with less precedence than a * rule.
The following rule will override it as a
normal part of the cascade. */

body {
  background-color: yellow;
}
Run Code Online (Sandbox Code Playgroud)
<body bgcolor=#FFFFFF>
  <h1>Hello world!</h1>
  <p>This page was once white...
  <p>... now it's yellow!
Run Code Online (Sandbox Code Playgroud)

如果您将其添加到html元素中,您将最终得到两个背景:

/*
body {
  background-color: #FFFFFF;
}
*/

html {
  background-color: yellow;
}
Run Code Online (Sandbox Code Playgroud)
<body bgcolor=#FFFFFF>
  <h1>Hello world!</h1>
  <p>This page was once white...
  <p>... wait, what?
Run Code Online (Sandbox Code Playgroud)

如果你知道body具有bgcolor属性的元素,那么这确实具有作为视觉提醒的优点,可以去掉属性.但是,如果你不立即发生这种情况,你可能会陷入困境.

当然,如果你正在创作新文件,那么这只是一个传统问题(它与整个"易迁移"事物联系在一起).没有什么可以阻止你将背景应用于两者 htmlbody有趣的效果,尽管这已经被很大程度上取代了向一个元素添加多个背景图层的能力,并且只有在你需要支持旧浏览器时才真正需要.在上面的链接中有更多相关信息.