考虑以下三个div:



.example-single {
  min-height: 100px;
  min-width: 100px;
  background-color: #04B43188;
}

.example-single:hover {
  background-color: #04B431CC;
}

.example-parent {
  min-height: 100px;
  min-width: 100px;
  background-color: #04B43188;
}

.example-child {
  height: 100px;
  width: 100%;
  background-color: transparent;
}

.example-child:hover {
  background-color: #04B43144;
  /* what alpha is needed here?! */
}

.reference {
  min-height: 100px;
  min-width: 100px;
  background-color: #04B431CC;
}

<div class="example-single">Single
</div>

<div class="reference">Reference
</div>

<div class="example-parent">
  <div class="example-child">Nested
  </div>
</div>





目的是使单个和嵌套div在悬停时具有相同的颜色(在这种情况下,要匹配参考div)。对于单个div来说,这很容易,但是对于嵌套div来说,父级和子级的颜色就会叠加。我该如何计算需要给孩子达到的Alpha值?

最佳答案

假设您有两个重叠的黑色元素,每个元素有50%的不透明度,则重叠部分的alpha值为(1-(0.5 * 0.5))* 100或75%alpha。

html - 如何在CSS中添加alpha?-LMLPHP

在您的情况下,#XXXXXX88(十进制值136,或255的53%)和#XXXXXXCC(十进制值204,或255的80%)的相加alpha将为(1-(0.53 * 0.8))* 100 = 57.6%(或#XXXXXX93)。

我个人建议使用rgba值而不是十六进制值,以提高可读性,您可以将alpha定义为十进制而不是十六进制。

关于html - 如何在CSS中添加alpha?,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/49968499/

10-12 01:36
查看更多