不考虑背景颜色 rgba 不透明度的标签

Question

我遇到了一个奇怪的情况：

在下面的代码片段中，当我尝试将 rgba 颜色应用到我的 a 标签时，它就像是 rgb 颜色，而不是 rgba。所以文本背景是纯色的，但背景的其余部分（来自 span 而不是 a）具有正确的不透明度。

我知道我可以将 :hover 查询分开，这会解决问题，但我想知道为什么要这样做？我做错了什么？

span {
  display: inline-block;
  padding: 5px;
  border: 2px solid #00bcd4;
  border-radius: 5px;
  margin: 5px;
  background: #ffffff;
  cursor: pointer;
}
span a {
  text-decoration: none;
  color: #00bcd4;
}
span:hover,
span:hover a {
  background: rgba(0, 188, 212, 0.5);
  color: #ffffff;
}

<span><a href="">Link</a></span>

Answer 1

span:hover,
span:hover a {
  background: rgba(0, 188, 212, 0.5);

这意味着您在其内部 "a" 的范围和上设置了 50% 的不透明度背景。在 "a" 上，您会看到 50% 的背景，后面是 span 的背景，因此它会显得更暗。

解决方案：

span {
  display: inline-block;
  padding: 5px;
  border: 2px solid #00bcd4;
  border-radius: 5px;
  margin: 5px;
  background: #ffffff;
  cursor: pointer;
}
span a {
  text-decoration: none;
  color: #00bcd4;
}
span:hover {
  background: rgba(0, 188, 212, 0.5);
}
span:hover a {
  color: #ffffff;
}

<span><a href="">Link</a></span>

Answer 2

尝试添加 opacity:0.5；在

span:hover,
span:hover a {
  background: rgba(0, 188, 212, 0.5);
  color: #ffffff;
}

Answer 3

仅将背景应用于跨度并将颜色应用于锚点 link。

span:hover {
   background: rgba(0, 188, 212, 0.5);
}
span:hover a {
   color: #ffffff;
}

JsFiddle

不考虑背景颜色 rgba 不透明度的标签

A tag not respecting background color rgba opacity

css

opacity

background-color