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

您应该使用CSS rgba()功能来设置.sprite { background-image: url(../img/sprite/Teal_Icons.png); display: inline-block; background-repeat: no-repeat; } .icon-1{ background-position: -420px -214px; width: 70px; height: 69px; } 而不是opacity：

color

@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);
}