CSS，不透明度使一些字体隐藏答案

【问题标题】：CSS, opacity makes some fonts hidesCSS，不透明度使一些字体隐藏
【发布时间】：2014-10-04 23:06:50
【问题描述】：

这很难解释，所以看看代码：

HTML：

   <link href='http://fonts.googleapis.com/css?family=Rock+Salt' rel='stylesheet' type='text/css'>
  <h1>Header<span>andAnother</span></h1>

CSS：

h1 {
  font-family: tahoma;
  position: absolute;
}

h1 span {
  opacity: 0.9;
  font-family: 'Rock Salt', cursive;
  font-style: italic;
  position: relative;
  top: 30px;
  left: -100px;
}

这是fiddle，现在有什么问题？

如果您查看 andAnother 中的 and 一词，您会发现 a 的部分缺失，其发生的原因是因为 opacity 规则，如果我删除 opacity a 将按原样显示，现在我几乎可以确定问题是因为 opacity 低于 1 creates new stacking context 但我无法证明这一点，我什至不确定我是的，如果有人能解释原因和方式，我将非常感激。

【问题讨论】：

jsfiddle.net/zp6w4dzc/1insight

标签： html css

【解决方案1】：

您可以使用 rbga 代替不透明度。即color: rgba(0, 0, 0, 0.9);

http://jsfiddle.net/zp6w4dzc/3/

可能和这个 ClearType 字体错误有关...https://bugzilla.mozilla.org/show_bug.cgi?id=494320

编辑添加CSS opacity vs rgba: which one is better?

【讨论】：

嗨，也许是关于这个错误，我不确定，谢谢你的替代方案，但我仍然对原因很感兴趣。