Question

我有一个奇怪的情况：

在下面的代码段中，当我尝试将rgba颜色应用于我的标记时，它就像是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 {
  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

将背景应用于仅限跨度并将颜色应用于锚链接。

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

here

Answer 3

尝试添加不透明度：0.5;在

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

不尊重背景颜色rgba不透明度的标签

3 个答案: