画布背景和HTML <body>元素

Question

画布背景和HTML <body>元素

htmlcssbackgroundspecifications

14

根据规范：

建议HTML文档作者将画布背景指定为BODY元素，而不是HTML元素。

但它并没有说明这样做有什么优势。为什么规范要这样建议呢？

P.S.当我看到body高度为100vh时出现额外滚动条时，我突然想：把背景直接给html元素会不会更好呢？

- Mori

相关：全局 CSS 样式应该设置在 HTML 元素还是 body 元素上？ - BoltClock

3个回答

0

我的答案会更快，因为BoltClock的回答和规范都详细解释了。

这是一个效率问题。

如果你考虑到UA应该“[使用]BODY元素背景属性的值作为它们的初始值”，将这些值分配给body标签就有意义了。如果你使用html标签，UA可能会使用一种回退来显示它，这是耗时的。当然，对于现在的计算机来说，这没什么，但是对于移动设备呢？比如显示一个带有覆盖背景大小的背景图像？

此外，html标签的顺序是一个逻辑顺序，链接标签在头部定义，以便用于身体和他的后代。但是，如果你对html标签应用css规则，UA可能会向后...然后向前。

那么指定画布背景为BODY元素有什么优势呢？对于你来说几乎没有什么，但对于用户来说可以节省一些微秒，对于客户端和服务器来说可以节省一些微瓦，但小溪汇成江河。

W3C可能决定做相反的事情，这也可以，这只是标准的目的，让浏览器按照你的期望工作。

什么？iOS不遵守规则吗？（他们可以，他们是苹果）。不要改变正确的做法，使用媒体查询。

- Pierre

1

如果您使用html标签，UA可能会使用一种回退方式来显示它。 "fallback"是什么意思？规范暗示，无论您指定html元素还是body元素的背景都没有区别（假设您只选择一个）-在您引用的文本之后，它说“传播值被视为在根元素上指定的值。” - BoltClock

@BoltClock，我的理解是，在HTML或XHTML文档的特定情况下，传播的值被视为在根元素上指定的值（“通用”情况，请参见3.11的开头，我猜测x / html与其他文档的特殊情况是一个核心问题）。它不应该有任何区别（html与body的背景），以使其更加灵活，但是，我所说的“回退”的意思是有一种首选的方式（即body），最好遵循这种方式以提高效率，换句话说UA将首先检查body的背景。 - Pierre

0

实际上这是个偏好问题，这就是为什么它被推荐而不是被强制作为严格规则。

body标签作为html标签的后代会覆盖html属性，除非是background属性。

然而，由于所有浏览器默认给body标签加上边距，创建了一个在body和浏览器窗口之间的边框（尽管我们习惯将此边距重置为0），我猜这个...边框应该是可见的，因此在HTML上使用背景会使这个边框对用户不可见。鉴于这一事实，并且所有内容都包含在body标签内，因此规范提供了这个建议。

然而，现在几乎每个人都将body标签重置为0，因此在html或body标签上使用它没有区别，每种情况都与另一种情况相比没有优势。

- scooterlord

"body标签作为html标签的子元素，会覆盖html属性，包括背景。你能否重新表述一下？我认为你可能在暗示这样一个事实：将背景应用于body会导致它绘制整个画布，而不仅仅是body元素 - 除非你实际上是在说body背景确实会覆盖html背景，这并不能说明全部情况。" - BoltClock

3

“margin to body ... creating a border ... I guess this ...border was meant to be visible” 这句话的意思是“给body设置margin会创建一个边框，我猜这个边框是有意让它可见的”。之所以称其为margin而不是border是有原因的。它只应该作为间隔来显示，是网页只由在线文本文档组成的时代的遗物（因此称为“web pages”），可以在视觉上将内容与浏览器窗口分开。只要保留body的margin，就可以将背景应用于html或body（但不能同时应用）。因此，默认的margins是否被保留并不影响结论。 - BoltClock

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- BoltClock · Accepted Answer

在CSS出现之前，背景是通过将background和bgcolor属性添加到HTML中的body元素来指定的（以及其他类似于text、link、alink、vlink、leftmargin、marginwidth、topmargin和marginheight的属性）。符合CSS标准的浏览器会将这些表现属性转换为相应的样式规则，作为作者级别的表现提示，优先级仅低于作者级别的*规则。有关此内容的更多信息，请参见css-cascade-3和HTML。即，background和bgcolor属性分别转换为body元素的background-image和background-color声明。

因此，建议作者为body元素指定画布背景而不是html元素，以便从具有表示性属性的body元素迁移到CSS的遗留HTML文档。通常，如果您控制标记和CSS，则可能想要做的第一件事情是摆脱表示性属性。但是，您不需要立即这样做；您只需添加特定于body元素的background声明，它将无缝替换整个页面背景（如问题中的规范链接所述）由表示性属性指定，无需进一步操作：

/* 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;
}

<body bgcolor=#FFFFFF>
  <h1>Hello world!</h1>
  <p>This page was once white...
  <p>... now it's yellow!

如果您将其添加到 html 元素中，您最终会得到两个背景：

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

html {
  background-color: yellow;
}

<body bgcolor=#FFFFFF>
  <h1>Hello world!</h1>
  <p>This page was once white...
  <p>... wait, what?

如果你知道{code}body{/code}元素有一个{code}bgcolor{/code}属性，这确实有一个优点，可以作为一个视觉提示，让你摆脱这个属性。但是如果你不立即想到这一点，你可能会被留下困惑。

当然，如果你正在编写新文档，那么这只是传统的问题（这与“迁移的便利性”有关）。没有什么阻止你将背景应用于{em}html{/ em}和{em}body{/ em}以获得有趣的效果，尽管这在很大程度上已经被添加多个背景层到一个元素的能力所取代，并且只有在需要支持旧浏览器时才真正必要。关于这个问题，请参考上面的链接。