如何在CSS中为特定HTML元素设置背景色而不影响子元素

我试图设置HTML元素的background-color属性，同时保持其特定子元素的默认背景。在这里考虑一个简化的场景：

.container{
显示器：flex；
弯曲方向：行；
填充：20px；
边框：1px纯绿色；
宽度：500px；
}
.侧边栏{
最小高度：50px；
最小宽度：50px；
背景：蓝色；
}
.侧边栏2{
最小高度：50px；
最小宽度：50px；
背景：蓝色；
}
.内容{
显示器：flex；
弯曲方向：立柱；
填充：10px；
背景：透明；
}
.输入，.输出{
最小宽度：300px；
最小高度：50px；
边框：1px纯红；
背景：透明；
填充：10px；
利润率：10px；
}

输入内容


输出内容

它不是为所有元素设置背景。如果将输入元素的背景设置为透明，那么显然，容器背景的背景将通过透明的输入元素显示。您可以通过将容器的背景设置为灰色，将输入设置为白色来测试这一点。您能澄清一下“基本背景”是什么意思吗？是容器母公司的背景色还是…@AHaworth，我应该在问题中澄清一下。这里的场景是，

input

和

output

容器的内容来自DOM底部的

iframe

元素。因此，

输入

和

输出

元素是在顶部定义的存根，其背景为

透明

。这样，

iframe

中的内容就会以任何CSS和背景显示出来。背景可以是任何东西，这就是为什么

输入

和

输出

元素必须是透明的。这有帮助吗？@Nolan，我对我的问题做了一些澄清。请看我上面的评论。谢谢，这更清楚了。基本上，无论输入和输出在哪里，您都希望灰色背景中有“洞”。在灰色背景下是否还有其他东西也需要消除，或者只是灰色？