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>

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

Answer 2

您可以稍微修改HTML并为此类“opacity-layer”添加不透明度

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

不透明度元素上的非不透明度元素

2 个答案: