我怎样才能使 opague 样式只影响外部元素而不是内部元素

Question

我试图使外部元素具有不透明的影响并使内部元素保持不变。我尝试使用重要，但没有奏效。这是我的代码

<h1 id="outer"><div id="inner">Planet</div></h1> 

和 CSS

#outer{
         background-color: black;
         opacity: 0.8;
     }
     #inner{
         color: white !important;
     }

这正确的语法是什么？

Answer 1

改

用 RGBA，您可以使用 Alpha 通道更改外部背景颜色的不透明度

#outer{
     background-color: rgba(0,0,0,0.8);
}

要了解有关RGBA的更多信息，请查看此内容