Html 如何在其他孩子的前景上为他们应用背景（他们已经有了背景集）？

您好，我有一个这样的html：

孩子1
孩子2

我想要的图像：

我想在其他孩子背景色的前景中看到

container

的背景色。 如果容器的背景色有一半不透明度，则容器bg颜色和子bg颜色应合并

这里有一个（不是）令人惊讶的例子：

这里的问题是容器的背景色没有应用到其他div的前景上

---

有什么问题吗？

在普通css中，您可以执行以下操作：

.child1{
背景颜色：绿色；
}
.儿童2{
背景颜色：蓝色；
}
.容器：悬停{
背景色：rgba（255,0,0,0.5）；
}

孩子1
孩子2

我已经做了一些更改，我认为您可以像这样实现您想要的（使用

第n个类型的
或
第n个子类型的
和
混合混合模式
）：-


.container:悬停{
背景色：rgba（0,255,0,0.5）；
}
.孩子{
混合模式：颜色燃烧；
}
.子项：第n个类型（1）{
背景色：红色；
}
.子项：第n个类型（2）{
背景颜色：蓝色；
}

孩子1
孩子2
悬停仍在应用，但仅为他自己不会影响他们的孩子


.container{
显示器：flex；
填充：0.1rem；
}
.容器：悬停{
背景色：rgba（255,0,0,0.5）；
}
/*用重要键覆盖CSS*/
.容器跨度：悬停{
背景色：rgba（255,0,0,0.5）！重要；
}
.儿童1{
背景颜色：绿色；
宽度：50%；
}
.儿童2{
背景颜色：蓝色；
宽度：50%；
}

孩子1
孩子2
使用背景图像应用另一层的不同想法：


.container:hover>.child{
背景图像：线性梯度（rgba（255,0,0,0.4）0）；
}
.子项：第n个类型（1）{
背景颜色：绿色；
}
.子项：第n个类型（2）{
背景颜色：蓝色；
}
.孩子{
填充：20px；
颜色：#fff；
}

孩子1
孩子2
因此，创建另一个选择器以覆盖子项的bg颜色。SCSS在代码段中不起作用。虽然你可能没有正确地解释这个问题，但你所做的工作还是有效的？我编辑了我的issue@TheoCerutti-一个澄清-是否希望对整个容器应用背景色（悬停），然后希望您的子div也具有相同的背景色（悬停在容器上）？如果是这样，我已经更新了我的答案以反映同样的情况。@TheoCerutti更新了我的答案完美！谢谢我还添加了一个隔离：隔离；对容器不要和背景混在一起真是太好的回答了