CSS: Warum gilt die Opazität nur für die untergeordneten Elemente und NICHT für das übergeordnete Element?

Question

Ich habe die Deckkraft eines bestimmten Elternelements (.container) festgelegt. Es gilt nicht für den Container, sondern nur für die Kinder (.donate-btn) innerhalb des Containers (schließlich möchte ich, dass das Gegenteil der Fall ist, denn der Elternteil hat eine reduzierte Undurchsichtigkeit und die Kinder sind solide, für die es da ist mehrere Antworten in SO, aber ich habe nichts mit dem umgekehrten Problem gesehen). Das Eltern (#main) der .container hat ein Hintergrundbild.

Als ich anfing, mit der Opazität zu spielen, zeigte das Eltern-Div die angewendete Opazität an. Aus irgendeinem Grund ist es nicht und ich weiß nicht, was sich geändert hat.

Hier ist der relevante 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'>$25</div> 
       </button> 
       <button class='donate-btn' data-amt='50'> 
        <div class='amt'>$50</div> 
       </button> 
       <button class='donate-btn' data-amt='100'> 
        <div class='amt'>$100</div> 
       </button> 
     </form> 
    </div> 
</section> 

Hier ist ein jsfiddle. Ich setze den Hintergrund zur Vereinfachung auf grün (anstatt auf ein Bild).

Warum ändert sich die Deckkraft des Containers nicht, nur die Kinder? Wie kann ich die Opazität des .container ändern?

Answer 1

Das liegt daran, dass Ihr Container keine Hintergrundfarbe hat - der Standard ist transparent.

Diese Illusion lässt den Eindruck entstehen, dass die Deckkraft den Container nicht beeinflusst, was er tatsächlich tut.

Um die Opazität Effekt deutlich, fügen Sie einen soliden Hintergrund Farbe zu sehen:

#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'>$25</div> 
 
     </button> 
 
     <button class='donate-btn' data-amt='50'> 
 
     <div class='amt'>$50</div> 
 
     </button> 
 
     <button class='donate-btn' data-amt='100'> 
 
     <div class='amt'>$100</div> 
 
     </button> 
 
    </form> 
 
    </div> 
 
</section>

Answer 2

Ihr .container Element tut haben Opazität, jedoch gibt es keinen Inhalt/Hintergrund/etwas nach innen (direkt) auf dieses Element, um es undurchsichtig zu machen.

Wenn (zum Beispiel) Sie den Hintergrund Ihrer .container-red eingestellt werden, dass es Opazität hat sehen können:

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

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

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

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