rgba 字母周围的奇怪轮廓

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

这个 'white border' 实际上是浏览器试图在灰色上很好地呈现这个大的半透明字母。您看到的颜色实际上介于灰色和透明暗红色之间，呈现出白色光晕。

我会尝试使用这些 CSS 属性： CSS text-rendering

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

除此之外，我建议在这里选择不透明的颜色，以避免任何不可预测的外观。看起来这是#854246

Answer 2

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

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

它的渲染方式与 RGBA 不同。

rgba 字母周围的奇怪轮廓

Weird outline around rgba letter

css

google-chrome

rgba