html - 我如何才能做到，那么模糊的风格只会影响外部元素，而不会影响内部元素

我正在尝试使外部元素具有不透明的效果，并使内部元素保持不变。我尝试使用重要的按钮，但这没有用。这是我的代码

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

和CSS

#outer{
         background-color: black;
         opacity: 0.8;
     }

     #inner{
         color: white !important;
     }

正确的语法是什么？

最佳答案

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

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

了解有关rgba check this out的更多信息