这很难解释,因此请看一下代码:

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,现在出了什么问题?

如果您查看and中的andAnother一词,您会发现a的一部分丢失了,其发生的原因是因为opacity规则,如果我删除了opacity >将显示为应有的样子,现在我几乎可以确定问题是因为a低于opacity creates new stacking context,但是我无法证明这一点,而且我甚至不确定自己是对的,如果有人能解释为什么以及我将非常感激。

最佳答案

您可以使用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?

关于html - CSS,不透明度会使某些字体隐藏,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/26198033/

10-16 00:09