这很难解释,因此请看一下代码:
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/