如何不设置背景色让绝对定位的HTML表格完全不透明？

提供的代码 #

<html>
<head>
<style>
.globalpopup {
  margin: 0px;
  padding: 2px;
  position: absolute;
  opacity: 1;
  background: inherit;
}
</style>
</head>
<body>
 <table class="globalpopup"><tr><td><span>!!</span></td></tr>
 </table>
 <div>This is a document. There's a ton of stuff here.
</body>
</html>

问题描述 #

当前表格背景为透明状态，但内部span标签的文本背景不透明。需要在不手动设置具体背景色值的前提下让整个表格完全不透明。所有元素未设置自定义颜色，采用浏览器默认值；尝试通过JavaScript获取body背景色返回空字符串，background: inherit方案在此场景无效。

解决方案 #

使用CSS系统颜色关键字实现，无需手动指定具体色值：
修改.globalpopup的CSS样式，将background: inherit替换为background-color: Canvas：

.globalpopup {
  margin: 0px;
  padding: 2px;
  position: absolute;
  opacity: 1;
  background-color: Canvas;
}

原理说明 #

Canvas是CSS标准定义的系统颜色关键字，会自动匹配浏览器默认的页面背景色（即body的默认背景）。这样既不用写死具体颜色值，也能让表格拥有不透明背景，完美适配浏览器默认样式。

内容的提问来源于stack exchange，提问作者Joshua