嵌套元素中的 CSS 透明度问题答案

【问题标题】：CSS transparency issues in nested elements嵌套元素中的 CSS 透明度问题
【发布时间】：2023-03-10 10:49:01
【问题描述】：

嘿，我想知道你们中是否有人遇到过类似的问题？我正在处理网页的一个广告部分，它有一个非常酷的背景，我想继续进入元素的部分，所以我有一个盒子，里面有一个盒子，用于 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

【问题讨论】：

此处已回答：stackoverflow.com/questions/4997493/…
感谢该链接.. 伙计，我很沮丧，没有明确的忽略方法或其他东西。生病必须尝试其他东西..非常感谢这些资源
Transparent background, but not the content (text & images) inside it, in CSS only?的可能重复

标签： html css nested opacity

【解决方案1】：

您可以为此使用 css3 rgba 属性，对于 IE，您可以使用 IE filter。这样写：

    .side{
      background-color: rgba(0,0,0, 0.5);
      background: transparent;
      filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#7F000000,endColorstr=#7F000000);   /* IE*/      
      zoom: 1;
    }

【讨论】：

可以与 ie 一起使用吗？ 8浏览器虽然。我们的客户很大，所以我们不知道会使用什么类型的浏览器
它适用于所有浏览器接受 IE 但为此您可以使用 IE 过滤器。你可以从这里生成你的过滤器kimili.com/journal/…

【解决方案2】：

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

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

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

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

另见：

MDN：hsla colors
MDN：rgba colors

【讨论】：