堆叠的半透明盒子的颜色取决于顺序？
堆叠的半透明盒子的颜色取决于顺序？
提问于 2018-05-29 07:34:41
为什么两个堆叠的半透明盒子的最终颜色取决于顺序？
我怎样才能使它在两种情况下都得到相同的颜色？
.a {
background-color: rgba(255, 0, 0, 0.5)
}
.b {
background-color: rgba(0, 0, 255, 0.5)
}<span class="a"><span class="b"> Color 1</span></span>
<span class="b"><span class="a">Different Color 2</span></span>
回答 2
Stack Overflow用户
发布于 2018-05-29 07:53:37
您可以使用css属性mix-blend-mode : multiply (有限的browser support)
.a {
background-color: rgba(255, 0, 0, 0.5);
mix-blend-mode: multiply;
}
.b {
background-color: rgba(0, 0, 255, 0.5);
mix-blend-mode: multiply;
}
.c {
position: relative;
left: 0px;
width: 50px;
height: 50px;
}
.d {
position: relative;
left: 25px;
top: -50px;
width: 50px;
height: 50px;
}<span class="a"><span class="b"> Color 1</span></span>
<span class="b"><span class="a">Different Color 2</span></span>
<div class="c a"></div>
<div class="d b"></div>
<div class="c b"></div>
<div class="d a"></div>
Stack Overflow用户
发布于 2018-05-29 14:50:45
有关发生的情况的解释，请参阅Temani Afif的答案。
作为另一种解决方案，您可以选择一个跨度，例如a，如果它位于b内部，则对其进行定位，并为其提供较低的z索引。那么堆叠将始终是相同的:在第一行中，b被绘制在a之上，而在第二行中，a被绘制在b之下。
.a {
background-color: rgba(255, 0, 0, 0.5);
}
.b {
background-color: rgba(0, 0, 255, 0.5);
}
.b .a {position:relative; z-index:-1;}<span class="a"><span class="b"> Color 1</span></span>
<span class="b"><span class="a">Same Color 2</span></span>
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/50574524
复制相关文章
相似问题