CSS : 왜 불투명도는 부모 요소가 아닌 자식 요소에만 적용됩니까?

Question

특정 부모 요소 (.container)의 불투명도를 설정했습니다. 컨테이너에 적용되는 것이 아니라 컨테이너 내부의 자식 (.donate-btn)에만 적용됩니다 (결국 부모가 불투명도를 줄이고 자식을 단색으로 유지하기를 원합니다. 그래서 여러 답변,하지만 난 반대 문제와 아무것도 보지 못했어요). .container의 부모 (#main)에는 배경 이미지가 있습니다.

불투명도로 처음 재생을 시작했을 때 부모 div가 적용된 불투명도를 표시하고있었습니다. 웬일인지 그것이 아니라고 나는 무엇이 바뀌 었는지 모른다.

이

.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> 

가 jsfiddle입니다

여기에 관련 CSS입니다. 간단히하기 위해 배경을 녹색이 아닌 이미지로 설정했습니다.

.container의 불투명도가 변경되지 않는 이유는 무엇입니까? .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'>$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

귀하의 .container 요소 :

추가, 명확하게 단색 배경 색을 불투명도 효과를 보려면 직접) 해당 요소를 불투명하게 만듭니다. - 그 그냥 분명하지

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>