考虑以下三个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。
在您的情况下,#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/