为什么两个堆叠的半透明盒子的最终颜色取决于顺序?
我怎样才能使它在两种情况下都得到相同的颜色?
.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>
发布于 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>
发布于 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>
https://stackoverflow.com/questions/50574524
复制相似问题