CSS: Почему непрозрачность применяется ТОЛЬКО к детям, а НЕ к родительскому элементу?

Я установил непрозрачность определенного родительского элемента (.container). Он не применяется к контейнеру, а только к дочерним элементам (.donate-btn) внутри контейнера (в конце концов, я хочу, чтобы противоположность была правдой, поскольку родитель имел уменьшенную непрозрачность, а дети были твердыми, для чего есть несколько ответов в SO, но я ничего не вижу с обратной проблемой). Родительский (#main) из .container имеет фоновое изображение.CSS: Почему непрозрачность применяется ТОЛЬКО к детям, а НЕ к родительскому элементу?

Когда я впервые начал играть с непрозрачностью, родительский 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'>$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. Я установил для фона зеленый цвет (а не изображение).

Почему непрозрачность контейнера не меняется, только дети? Как я могу получить непрозрачность .container?

источник

2016-12-20 nutsandbolts

это - его просто не так очевидно. попробуйте использовать #fff в качестве цвета фона. –

Это потому, что ваш контейнер не имеет цвета фона - по умолчанию прозрачность.

Эта иллюзия создает впечатление, что непрозрачность не влияет на контейнер, который на самом деле он делает.

Чтобы увидеть эффект непрозрачности ясно, добавить сплошной цвет фона:

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

источник

2016-12-20 01:46:49

Ваш .container элемент делает нет непрозрачности, однако есть не содержание/фон/ничего внутри (напрямую) на этом элементе, чтобы сделать его непрозрачным.

Если (к примеру) вы будете установить фон вашего .container к red вы можете увидеть, что он имеет непрозрачность:

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>

источник

2016-12-20 01:46:58 Dekel

CSS: Почему непрозрачность применяется ТОЛЬКО к детям, а НЕ к родительскому элементу?

ответ

Смежные вопросы