html - 嵌套元素中的 CSS 透明度问题

Question

嘿，我想知道你们中是否有人遇到过类似的问题？我正在处理网页的广告部分，它有一个非常酷的背景，我想继续进入元素的部分，所以我有一个盒子，里面有一个盒子，用于将 RSS 提要放入网站上的更新中，然后我有一个广告箱。这是我的 html:

<div class="side">
  <div id="ad">
    bla
  </div>
  <div id="rss_news">
    double bla
  </div>
</div>

和CSS:

.side {
  float: left;
  background-color: black;
  width: 300px;
  min-height: 710px;
  padding: 0 0 0 0px;
  margin-top: 25px;
  border: 1px solid white;
  border-radius: 8px 8px 8px 8px;
  opacity: 0.3;

 }

 #ad {
   border: 1px solid blue;
   height: 320px;
   max-height: 350px;
   margin: 15px;
   opacity: 1;

 }

 #rss_news {
   border: 1px solid yellow;
   height: 320px;
   max-height: 350px;
   margin: 15px; 
   opacity: 1;

 }

如您所见，正如我所预料的那样，辅助类将他的属性赋予嵌套在他内部的那些属性。有没有办法让我以某种方式告诉其他 id 标签忽略该不透明度？

提前致谢:D

Answer 1

没有办法让后代忽略父代的opacity。

您可以使用rgba/hsla 颜色来获得部分透明的背景，而不会影响 child 的可见性。示例:

.side {
   background-color: rgba(0,0,0, 0.3);
}

演示:http://jsfiddle.net/ywQy5/

另见:

• MDN:hsla colors
• MDN:rgba colors