为什么两个堆叠的半透明盒子的最终颜色取决于订单？
我怎么能这样做才能在两种情况下得到相同的颜色？
.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>我有一整段代码filter: invert(0.85)应用了CSS规则.
在这个块中,我有一个图像,当然也遵循这个CSS规则,并且是倒置的.
我需要恢复这个invert()图像.
可能吗？我试过了invert(1),但是图像并不像以前那样完全,它仍然有点倒置(由于第一个invert只是0.85而不是1)
看这个例子:
body{
font-size: 0;
}
div{
display: inline-block;
width: 50%;
}
.filter{
filter: invert(0.85);
}
.filter img{
filter: invert(1);
}<div class="initial">
<img src="https://s7d1.scene7.com/is/image/PETCO/cat-category-090617-369w-269h-hero-cutout-d?fmt=png-alpha" alt="">
</div>
<div class="filter">
<img src="https://s7d1.scene7.com/is/image/PETCO/cat-category-090617-369w-269h-hero-cutout-d?fmt=png-alpha" alt="">
</div>