CSS：为什么不透明度只适用于 children 而不是 parent 元素？

Question

我已经设置了特定 parent 元素 (.container) 的不透明度。它不适用于容器，而仅适用于容器内部的 children (.donate-btn)（最终我希望相反的情况成立，因为 parent 具有降低的不透明度和children 是可靠的，因此在 SO 中有多个答案，但我没有看到任何相反的问题）。 .container 的 parent(#main) 有背景图片。

当我第一次开始使用不透明度时，parent div 显示应用的不透明度。出于某种原因，它不是，我不知道发生了什么变化。

这里是相关的CSS:

.container {

   margin-right: 10%;
   margin-left: 10%;
   display: block;
   padding: 30px;
   padding: top 300px;
   opacity: .5;
   border: 2px solid black;
   border-radius: 2em;
}

.donate-btn{
    border: 2px solid black;
    border-radius: 2em;
    display: inline-block;
    margin: 15px;
    padding: 15px;
    width: 200px;
    height: 80px;

}

HTML:

<section id="main"> 
        <div class="container">
            <form id="sendDonation">
                <input id='donation-amt' type="hidden" name="amount">
                <button class='donate-btn' data-amt='25'>
                    <div class='amt'></div>
                </button>
                <button class='donate-btn' data-amt='50'>
                    <div class='amt'></div>
                </button>
                <button class='donate-btn' data-amt='100'>
                    <div class='amt'>0</div>
                </button>
      </form>
     </div>
</section>

这是一个jsfiddle。为了简单起见，我将背景设置为绿色（而不是图像）。

为什么 .container 的不透明度不变，只有 children？我怎样才能改变 .container 的不透明度？

Answer 1

那是因为你的容器没有背景颜色——默认是透明的。

这种错觉使不透明度似乎不影响容器，实际上它会影响。

要清楚地看到不透明效果，请添加纯色背景：

#main {
  /* background-image: url("img/donate-background.jpg"); */
  background-color: green;
  background-size: cover;
  padding-top: 30px;
  padding-bottom: 30px;
}
.container {
  margin-right: 10%;
  margin-left: 10%;
  display: block;
  padding: 30px;
  padding: top 300px;
  opacity: .5;
  border: 2px solid black;
  border-radius: 2em;
  background: white;
}
.donate-btn {
  border: 2px solid black;
  border-radius: 2em;
  display: inline-block;
  margin: 15px;
  padding: 15px;
  width: 200px;
  height: 80px;
}

<section id="main">
  <div class="container">
    <form id="sendDonation">
      <input id='donation-amt' type="hidden" name="amount">
      <button class='donate-btn' data-amt='25'>
        <div class='amt'></div>
      </button>
      <button class='donate-btn' data-amt='50'>
        <div class='amt'></div>
      </button>
      <button class='donate-btn' data-amt='100'>
        <div class='amt'>0</div>
      </button>
    </form>
  </div>
</section>

Answer 2

您的 .container 元素具有不透明度，但是该元素内部（直接）没有 content/background/anything 使其不透明。

如果（例如）您将 .container 的背景设置为 red，您可以看到它具有不透明度：

body {
  background: white;
}
#main{
 /* background-image: url("img/donate-background.jpg"); */
 background-color: green;
  background-size: cover;
 padding-top: 30px;
 padding-bottom: 30px;
    
}

.container {
    margin-right: 10%;
    margin-left: 10%;
    display: block;
    padding: 30px;
    padding: top 300px;
    opacity: 0.5;
    border: 2px solid black;
    border-radius: 2em;
       background: red;
    }

    .donate-btn{
  border: 2px solid black;
  border-radius: 2em;
  display: inline-block;
  margin: 15px;
  padding: 15px;
  width: 200px;
  height: 80px;
     
 }

<section id="main"> 
  <div class="container">
   <form id="sendDonation">
    <input id='donation-amt' type="hidden" name="amount">
    <button class='donate-btn' data-amt='25'>
     <div class='amt'></div>
    </button>
    <button class='donate-btn' data-amt='50'>
     <div class='amt'></div>
    </button>
    <button class='donate-btn' data-amt='100'>
     <div class='amt'>0</div>
    </button>
      </form>
     </div>
</section>

CSS：为什么不透明度只适用于 children 而不是 parent 元素？

CSS: Why is opacity applying ONLY to the children and NOT to the parent element?

html

css

opacity