элемент непрозрачности на элементе непрозрачности

Question

Я попытался создать кнопку внутри некоторого div. div имеет непрозрачность 0,8, но я не хочу, чтобы его кнопка (дочерняя кнопка) имела свою непрозрачность div (предка). как это можно достичь? я попробовал этот HTML:

<div class="divBox"> 
     <span class="title"> Some title </span> 
     <hr> 

     <div> 
      <span> Some Content </span> 
     </div> 

     <div class="divButton"> 
      <a class="myButton"> Button </a> 
     </div> 
</div> 

устанавливаемыми сотовыми:

.divBox{ 
    background-color: #ffffff; 
    -webkit-border-radius: 10px; 
    border-radius: 10px; 
    padding: 2%; 
} 

.divButton{ 
    text-align: left; 
    padding-bottom: 1%; 
    padding-top: 3%; 
} 

.myButton{ 
    background-color: #295b9f; 
    color: white; 
    padding: .5em .5em; 
    cursor: pointer; 
    border: aliceblue; 
    -webkit-border-radius: 20px; 
    border-radius: 3px; 
    margin-top: 2%; 
    opacity: 1; 
} 

спасибо за вашу помощь

Answer 1

Используйте rgba(r, g, b, a)background-color вместо opacity для обоих родителей и ребенка. a относится к альфа-значению или непрозрачности.

т.е.

.parent { 
    background-color: rgba(255,0,0, 0.8); /* change r,g,b as needed */ 
} 

.parent .child { 
    background-color: rgba(255,0,0, 1); /* change r,g,b as needed */ 
} 

Answer 2

Вы можете изменить HTML немного и добавить непрозрачность этого класса «непрозрачности-слой»

<div class="divBox"> 
    <div class="opacity-layer"> 
    <span class="title"> Some title </span> 
    <hr> 

     <div> 
     <span> Some Content </span> 
     </div> 
    </div> 
    <div class="divButton"> 
     <a class="myButton"> Button </a> 
    </div>