当使用不透明度时，CSS 下划线消失

Question

在当前稳定版本的Chrome中，当使用以下CSS设置了一些不透明度时，文本下划线会消失。当不透明度设置为1或移除时，下划线正常显示。请求帮助？谢谢！

@import url('//fonts.googleapis.com/css?family=Press+Start+2P');
p {
  font-family: 'Press Start 2P';
  text-decoration: underline;
  opacity: 0.5;
}

<p>Hello World</p>

- Philipp Lenssen

---

它只发生在你的字体家族中，使用默认字体则没有问题。 - Temani Afif

根据谷歌的说法，3小时前有一个类似的问题被提出，但作者已经删除了帖子。真是个奇怪的巧合。 - Joseph Webber

@JosephWebbern 同一个人 - 可能因为没有提供代码片段而被删除，所以问题被投票下降 - 很难将它们移除，因此更容易删除问题并提出新问题。 - Pete

是的，当我的问题被投票到无人问津并且显然表述错误时，我删除了它（有趣的是，StackOverflow在他们的博客上似乎非常关心一个友好的空间，但他们的框架做了很多事情来反对这一点：））。几个小时后，我再次遇到了这个问题，并花了更多时间创建了一个JSFiddle……并意识到字体可能是混合中的关键部分。 - Philipp Lenssen

Answer 1

使用CSS的rgba()函数来设置color，而不是使用opacity：

@import url('//fonts.googleapis.com/css?family=Press+Start+2P');
p {
  font-family: 'Press Start 2P';
  text-decoration: underline;
  color: rgba(0, 0, 0, 0.5);
}

<p>Hello World</p>

- Matthias Reumann

---

谢谢，这对于这个例子和我的一些用途是有效的！是否还有一种通用解决方案，适用于需要继承包装器颜色的更复杂的示例？例如，在我们的项目中，我们有一个名为“.pseudoLink”的类，我们在许多地方使用它，并且在其中一些地方设置了链接的不透明度...但不一定想重新设置颜色，而是继承它（或反之亦然，当我们设置颜色但不透明度时）。谢谢！ - Philipp Lenssen