我怎么能这样做，所以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 check this out

的更多信息