html - 使用颜色设置 alpha 时字母重叠

下面我有 2 个具有相同文本的 div 标签。一个使用 color 设置字体透明度,另一个使用 opacity

在第二个标签中,我可以看到所需的结果,但在第一个标签中,我看到一些字母相互重叠,从而产生半透明/不透明效果。

谁能解释为什么会出现这种字体渲染?

编辑:该问题发生在 Google Chrome

body{ font-family: Lobster; background: black; }
div{ font-size: 100px; }
div:hover{ color: #fff; opacity: 1; }
.alpha{ color: rgba(255, 255, 255, .3); }
.opac{ color: #fff; opacity: .3; }
<link href="https://fonts.googleapis.com/css?family=Lobster&display=swap" rel="stylesheet">
<div class="alpha">Toshio Bando</div>
<div class="opac">Toshio Bando</div>

最佳答案

在 chrome 中,这种行为得到了正确处理。根据 CSS specification 不透明度属性 应该被视为 后处理 操作。 RGBA 另一方面, 旨在 在屏幕外单独渲染所有单独的组件 ,将它们混合在一起,然后渲染到 DOM,并在后期应用不透明度等元素属性。

但是,由于 CSS 规范的实现不佳,因此在 Firefox 中查看时,这两个元素都会遇到此问题:

enter image description here

在 Chrome 中正确渲染:

enter image description here

跨浏览器重现问题的代码:

body{ font-family: Lobster; background: black; }
div{ font-size: 100px; }

.alpha:hover{ color: rgba(255, 255, 255, 1); }
.alpha{ color: rgba(255, 255, 255, .3); }

.opac:hover{ color: #fff; opacity: 1; }
.opac{ color: #fff; opacity: .3; }
<link href="https://fonts.googleapis.com/css?family=Lobster&display=swap" rel="stylesheet">
<div class="alpha">Toshio Bando</div>
<div class="opac">Toshio Bando</div>