使用不透明度时,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>

Answer 1

而不是opacity你应该color使用CSS rgba()功能设置:

@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>