空

空白页是什么颜色？请证明一下，因为页面有点白，我得说，超越正文。这有什么关系？白色和透明之间有什么区别？空白画布是什么颜色？

2025-05-24

空白页是什么颜色的？

证明一下这个页面不是白色的，因为我必须说它有点白

超越身体

这有什么关系？白色和透明的区别又是什么呢？

空白画布是什么颜色的？

请在脑海中想象以下 HTML 页面：

<html>
  <body>
    <h1>Hello World</h1>
  </body>
</html>
Enter fullscreen mode Exit fullscreen mode

你在浏览器中打开它。页面的颜色是什么？

这是一个 CSS 陷阱！

你可能会说这是一个陷阱问题，因为白色实际上不是一种颜色，但页面本身就不是白色的：它是透明的。当然，浏览器是白色的，但浏览器内部显示的页面是透明的。

证明一下这个页面不是白色的，因为我必须说它有点白

哲学家模式开启：

那么什么是页面？

这里必须考虑两个因素：

  • 元素body​
  • 元素html​

如果我们想让页面有黄色背景，我们可以background-color在正文上放置：

body {
  background-color: yellow;
}
Enter fullscreen mode Exit fullscreen mode

从这个例子中，我们可以假设主体填满了整个视口，因为现在一切都是黄色的。

事实并非如此。让我们给 body 添加一个边框：

可以看到，其实body部分只使用了呈现“Hello World”内容所需的空间。

那么为什么全是黄色呢？

哦，你得问问w3c：

根元素的背景成为画布的背景，并且其背景绘制区域延伸覆盖整个画布。

人工翻译：你在 body 上添加一个背景。浏览器会用它作为画布的背景。

你说的是画布吗？

文档画布是呈现文档的无限表面。

所以这相当大。

大多数 CSS 课程（包括我的课程，我必须承认）都没有提到画布的概念，尽管它是浏览器非常重要的一部分。正如我们所见，它基于body，为整个视口提供了背景。

有了这些新信息，让我们从上到下更新页面的心理模型：

  • 元素body​
  • 元素html​
  • 画布

很长一段时间以来，我都以为画布全是黄色的，是因为body就是画布。其实不然：画布只是使用了 的信息body，而且 画布 的尺寸可以比 本身大得多body。

有趣的是，尽管我们将主体设置为黄色，但它实际上是透明的。正如W3C所言：

根元素的背景就变成了画布的背景[...] 根元素不会再次绘制这个背景，即其背景的使用值为透明。

浏览器绘制body与画布颜色相同的 是没有用的：这就是它被视为透明的原因。

换句话说：当你在 上设置背景颜色时body，实际上是在给画布设置样式（画布无法直接在 CSS 中设置样式）。画布会“窃取” 的值body。

超越身体

哲学家模式开启：

那么身体是什么？

根据 w3c 的规定，主体是

内容出现的位置：文本、图像、颜色、图形等。

如果body是内容，那么可以肯定地说，超出的内容body就不是内容。

是的，谢谢你的意见

background-color那么在元素上设置肯定html不会产生任何效果，因为它不是内容的一部分？

停下来想一想：有了这些 CSS，我们的页面会是什么样子？

html {
  background-color: green;
}

body {
  background-color: yellow;
}
Enter fullscreen mode Exit fullscreen mode

现在页面是什么颜色？是黄色，是绿色，还是两者都有？当然是两者都有。

我们能看到什么？

  • 黄色现在仅限于body。
  • 该html元素似乎填满了整个视口。

错了！我们又一次被骗了。

但它确实填满了视口！整个页面都是绿色的！

我知道。但是让我们给html元素添加边框看看会发生什么：

此时值得注意的是，浏览器在 之外应用样式（例如边框）没有任何问题body。但我们继续。

因此实际上，的html行为就像body：它仅占用承载其内容所需的空间：body及其8px边距来自浏览器默认样式。

那么为什么到处都是绿色呢？

来自 w3c 的相同答案：

根元素的背景成为画布的背景。

我们还了解到根元素可以是body或html：

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

尽管 w3c 建议我们不要使用该html元素，但我们还是这样做了，并且画布绿色就是从那里获取的。

就像在第一个例子中一样，html被视为透明的：它的绿色被画布“窃取”了。

我们现在有了浏览器用来选择画布颜色的完整算法：

if (the html has a background-color) {
  use it to paint the canvas
} 
else if (the body has a background-color) {
  use it to paint the canvas
}
else {
  the canvas stays transparent
}
Enter fullscreen mode Exit fullscreen mode

嗯，我想这算是解开了一个谜团，而且也没什么奇怪的。你可以说这很聪明，我们不需要给根元素指定明确的尺寸就能让背景色填充视口。

这有什么关系？白色和透明的区别又是什么呢？

理解白色和透明之间的区别，即使两种情况看起来相同，也是解决一些 CSS 谜团的关键。

让我们来玩玩吧mix-blend-mode。这个 CSS 属性允许我们定义元素如何与其父元素混合。有时它被称为“浏览器中的 Photoshop”。无论是否夸张，它的可能性都令人惊叹。

Mix 混合模式示例

摘自 www.visualcinnamon.com

我们从一个简单的例子开始：h1将是绿色的，我们想用 改变它的外观mix-blend-mode: difference。

h1 {
  color: green;
  mix-blend-mode: difference;
}
Enter fullscreen mode Exit fullscreen mode

该difference值表示文本的颜色将是其原始颜色（绿色）和背景颜色之间的差异。

绿色和白色之间的区别是粉色。所以希望我们的标题是粉色的。

我再说一遍，它不是粉红色的。

但它应该融合！背景是白色的！

不，它不是。它是透明的。

啊啊！

绿色和透明的区别是绿色，因此标题的颜色没有变化。

让我们回顾一下：

  • 是body透明的（默认值为background-color）
  • 是html透明的（默认值为background-color）
  • 画布是透明的（htmlnor未提供任何值body）

所以我们的可怜的头衔没有任何可取之处。

修复很简单：只需background-color在 上放一个body！

body {
  background-color: white;
}
Enter fullscreen mode Exit fullscreen mode

现在就可以工作了！

我们再来回顾一下：

  • is body（在 CSS 中设置，transparent但white被画布“窃取”）
  • 是html透明的（默认值为background-color）
  • 画布为白色（值取自body）

这样，我们的绿色标题就与画布融为一体，变成了粉色。当然，这个标题可以是图片、视频，或者其他任何东西。body（或者任何包含我们目标的元素）必须有背景（你也可以为 设置背景来html实现，但这不是标准做法）。

我们的旅程即将结束，但还有最后一个问题……

空白画布是什么颜色的？

我们对页面的心理模型是这样的：

  • 元素body​
  • 元素html​
  • 画布

根据我们所学的，如果body和html是透明的，那么画布也会是透明的。

但是底层怎么能透明呢？如果这样的话，我们就能透过浏览器看到桌面和其他窗口了！你疯了吧！

听我说完。如果画布下面还有另一层，而且是白色的，会怎么样？

一定还有另一层

w3c再次给出了答案：

如果画布背景不是不透明的，则显示的内容取决于 UA。

人工翻译：画布后面有东西。如果画布是透明的，你就能看到它。你看到的内容取决于浏览器。

在我能想到的所有浏览器上，底层都是白色的。但理论上，它也可以显示一张马吃菠萝披萨的图片。那会是一个多么奇怪的网页啊。

无论如何，这让我开始思考：有没有什么办法能真正看出白色画布和透明画布之间的区别？我们能证明默认画布是透明的吗？只是问问一个奇怪的朋友。

iframe 线索

让我们回到一个非常简单的 CSS：

html, body {
  border: 3px dashed black;
}
Enter fullscreen mode Exit fullscreen mode

我们的页面如下所示：

让我们用标签将该页面包含在另一个页面中iframe：

<iframe src="..." width="100%" height="300px"></iframe>
Enter fullscreen mode Exit fullscreen mode

以下是我们得到的结果：

那么，问题是：iframe画布是透明的还是白色的？

我们可以通过在父页面上设置背景颜色来回答这个问题。

body {
  background-color: lightblue;
}
Enter fullscreen mode Exit fullscreen mode

可以看到，iframe、画布都是透明的body，html我们可以透过它看到父页面。

这真的能证明画布是透明的吗？也许 iframe 根本就没有画布？

这个问题问得好。为了回答这个问题，我们先给iframe'sbody标签加上白色背景：

body {
  background-color: white;
}
Enter fullscreen mode Exit fullscreen mode

以下是我们得到的结果：

如果 iframe 没有画布，其外部区域body将不会被填充。但是得益于画布机制，body可以使用 iframe 的背景色来覆盖整个iframe视口。

这样我们就可以看到，在任何页面上，默认画布都不是白色而是透明的。

所以，当你打开一个空白页面时，你看到的并不是一块白色的画布。它只是浏览器的“底部”，是软件的背景，独立于 CSS 领域之外，不用于与任何东西交互。

这太深奥了

因此，我们对所见事物的（最终？）心理模型是：

  • 元素body（默认透明）
  • 元素html（默认透明）
  • 画布（取决于html和body，因此默认透明）
  • 难以接近的软件基础（通常是白色）

哦，我尝试以视觉方式来表示它：

毕竟，这只是一个小的 Hello World

旅途真愉快。没错，我很喜欢派对。如果你对此有什么看法，请留言！

CSS 不仅与您看到的内容有关，而且与您看不到的内容也有关。

文章来源：https://dev.to/bcalou/what-is-the-color-of-a-blank-page-49og
Devto 翻译
PREV
API 安全最佳实践
NEXT
如果 Javascript 是单线程的，它如何实现异步？