RGBBA字母周围的怪异轮廓

Question

我在深色背景的字母上添加了rgba颜色，并且在Chrome（67）中周围有一个很小的白色轮廓。我强行使用outline: none，但没有任何改变。

body {
 background: #575354;
}

span.letter-back{
  top:-40px;
  z-index: 1;

  color:rgba(237, 28, 36, 0.3);
  font-size:300px;
  font-weight:900;
  font-family: sans-serif;

  outline:none !important;
}

<span class="letter-back">B</span>

有什么想法吗？谢谢！

Answer 1

这个“白色边框”实际上是浏览器试图将这个大的半透明字母很好地呈现为灰色。您所看到的颜色实际上介于灰色和深红色之间，并显示为白色。

我会尝试使用以下CSS属性： CSS text-rendering

它们可能会对输出产生影响。

除此之外，我建议在此处选择一种不透明的颜色，以避免出现任何无法预测的外观。看起来是＃854246

Answer 2

尝试使用rgb定义颜色并将不透明度设置为.3

span.letter-back {
 color:rgb(237, 28, 36);
 opacity: .3;
}

它的渲染与RGBA不同。