画布背景和HTML元素

前端之家收集整理的这篇文章主要介绍了画布背景和HTML元素前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
根据 spec

It is recommended that authors of HTML documents specify the canvas background for the BODY element rather than the HTML element.

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

附:当我看到Extra scrollbar when body height is 100vh时,它横渡了我的脑海:不是简单地给html元素的背景更好吗?

解决方法

在CSS之前,背景是通过在HTML中添加background元素和bgcolor属性来指定的(连同文本,链接,alink,vlink,leftmargin,marginwidth,topmargin和marginheight等).

CSS兼容的浏览器将这些呈现属性转换为适当的样式规则,作为作者级呈现提示,优先于作者级*规则.更多的内容css-cascade-3HTML.也就是说,background和bgcolor属性分别转换为body元素的background-image和background-color声明.

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

/* 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?

如果你知道body元素有一个bgcolor属性,那么它的优点就在于作为一个视觉提醒来摆脱属性.但是,如果你马上不会发生这种情况,你可能会留下flummoxed.

当然,如果你正在撰写新的文件,那么这只是一个传统的问题(它与整个“易迁移”事物有关).没有什么可以阻止你将html和body的背景应用于有趣的效果,尽管即使在很大程度上也被替换为一个元素添加多个背景图层的能力,只有当您需要支持旧版浏览器时,才有必要.更多关于这一点在上面的链接.

猜你在找的HTML相关文章