html - 使背景透明而不影响内容

Question

我有一个复杂的结构，如下所示:

<div class="container">
   <div class="heading">
       <!-- more <div>'s -->
   </div>
   <div class="inner">
       <!-- more <div>'s -->
   </div>
   <div class="footer">
       <!-- more <div>'s -->
   </div>
</div>

我的目标是使 .container 的背景透明度达到 90%。但是，我需要它的内容(文本、图像等)保持完全不透明。我知道这是一项具有挑战性的任务，但我尝试了以下方法:

.container {background: #fff; opacity: 0.9;}
.heading, .inner, .footer {opacity: 1.0;}

以及以下内容:

.container, .heading, .inner, .footer {background: rgba(255,255,255,0.9);}

#1 的问题是 .container 的所有后代都变得透明并且重置它们的不透明度是行不通的。在我的 #2 尝试中，我使用 rgba 设置了每个 div 的透明度，但问题是子 div 相对于它们的父 div 被设置为透明；因此，我没有在所有 div 中获得“统一”的透明度。

由于 opacity 和 rgba 似乎都不合理，我觉得以下可能可行:

<div class="container">
   <div class="transparent"></div>
   <div class="heading">
      <!-- more <div>'s -->
   </div>
   ...

然后，调整 .transparent 的 position 和 height 以便 container 中的每个其他 div 继续最重要的。

任何人都可以帮我解决这个问题或者可能对我的问题提出更好的解决方案吗？

Answer 1

你首先尝试的对我有用:

body {background: green; }
.container {background: #fff; opacity: 0.9;}
.heading, .inner, .footer {opacity: 1.0; background:#000; border: 1px solid red; width: 100px; height: 100px;}

    <div class="container">
       <div class="heading">
           <!-- more <div>'s -->
       </div>
       <div class="inner">
           <!-- more <div>'s -->
       </div>
       <div class="footer">
           <!-- more <div>'s -->
       </div>
    </div>

我添加了一些颜色，这样会更清楚发生了什么。