Question

我有一个复杂的结构，如下所示：

<div class="container">
   <div class="heading">
       <!-- more <div>'s -->
   </div>
   <div class="inner">
       <!-- more <div>'s -->
   </div>
   <div class="footer">
       <!-- more <div>'s -->
   </div>
</div>

我的目标是让.container的背景透明至90％。但是，我需要内容（文本，图片等）保持完全不透明。我知道这是一项具有挑战性的任务，但我尝试了以下方法：

.container {background: #fff; opacity: 0.9;}
.heading, .inner, .footer {opacity: 1.0;}

以及以下内容：

.container, .heading, .inner, .footer {background: rgba(255,255,255,0.9);}

＃1的问题是.container的所有后代都变得透明，重置它们的不透明度是行不通的。在我的＃2尝试中，我使用rgba设置每个div的透明度，但问题是子div与父母相比是透明的;结果，我没有得到制服＆＃34;所有div的透明度。

由于opacity和rgba似乎都不合理，我觉得以下情况可能有效：

<div class="container">
   <div class="transparent"></div>
   <div class="heading">
      <!-- more <div>'s -->
   </div>
   ...

然后，与position的{{1}}和height一起玩，以便.transparent中的每个其他div都在其上。

任何人都可以帮我解决这个问题，或者可能建议更好地解决我的问题吗？

Answer 1

删除不透明度的东西并仅运行：

<script>
    var tabs = document.getElementsByClassName("et_pb_tab");
    var toggles = document.getElementById("tabsacc").getElementsByClassName("et_pb_toggle");
    for (var i = 0; i < toggles.length; i++) {
        toggles[i].onclick = function() {
            var active = document.querySelector(".et_pb_active_content");
            active.classList.remove("et_pb_active_content","et-pb-active-slide");
            var thisclass = this.className;
            var substrclass = thisclass.search("et_pb_accordion_item_");
            var num = thisclass.charAt(substrclass + 21);
            tabs[num].classList.add("et_pb_active_content","et-pb-active-slide");
        };
    }
</script>

Answer 2

你最初尝试的对我有用：

＆＃13;

body {background: green; }
.container {background: #fff; opacity: 0.9;}
.heading, .inner, .footer {opacity: 1.0; background:#000; border: 1px solid red; width: 100px; height: 100px;}

＆＃13;

    <div class="container">
       <div class="heading">
           <!-- more <div>'s -->
       </div>
       <div class="inner">
           <!-- more <div>'s -->
       </div>
       <div class="footer">
           <!-- more <div>'s -->
       </div>
    </div>

＆＃13;

我添加了一些颜色，以便更明显地发生了什么。

Answer 3

将background-color设置为.container应该可以在不影响其后代的情况下发挥作用＆＃39;背景。默认情况下，background-color为transparent，因此，如果您没有专门为后代设置任何内容，那么它们将是透明的，因此似乎继承background-color。我已将background-colors分别设置为每个元素，其中一些元素未应用background-color，应该很清楚它们是哪些元素。

段

＆＃13;

.container {
  outline: 5px dotted red;
  background: rgba(0, 0, 0, 0.1);
}
.heading,
.inner,
.footer {
  outline: 3px dashed blue;
  width: 50%;
}
.heading {
  margin: 0 auto;
  background: yellow;
}
.footer {
  margin-left: 50%;
  background: lime;
}
.heading div,
.inner div,
.footer div {
  outline: 1px solid black;
  width: 25%;
}
div > div > div:nth-child(4n-1) + div {
  margin-left: 25%;
}
div > div > div:nth-child(2n+1) {
  margin-left: 50%;
}
div > div > div:nth-child(3n-5) {
  margin-left: 75%;
}
div > div > div:nth-child(3n-2) {
  background: red;
}
div > div > div:nth-child(3n-1) +div {
  background: black; color: white;
}
div > div > div:nth-child(2n-6) {
  background: blue; }

＆＃13;

<div class="container">
  <div class="heading">
    <div>1</div>
    <div>1</div>
    <div>1</div>
    <div>1</div>
    <div>1</div>
    <div>1</div>
    <div>1</div>
    <div>1</div>
  </div>
  <div class="inner">
    <div>2</div>
    <div>2</div>
    <div>2</div>
    <div>2</div>
    <div>2</div>
    <div>2</div>
    <div>2</div>
    <div>2</div>
    <div>2</div>
  </div>
  <div class="footer">
    <div>3</div>
    <div>3</div>
    <div>3</div>
    <div>3</div>
    <div>3</div>
    <div>3</div>
  </div>
</div>

＆＃13;

使背景透明而不影响内容

3 个答案:

段