javascript - 不透明元素上的非不透明元素

Question

我试图在一些 div 中设计一个按钮。div 的不透明度为 0.8，但我不希望它的按钮(子按钮)具有其 super (祖先)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>

CSS:

.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 指的是 alpha 值或不透明度。

即

.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 */
}