如何在不影响 CSS 3 中的子元素的情况下使 div 透明？答案

【问题标题】：how to make a div transparent without affecting the child in CSS 3?如何在不影响 CSS 3 中的子元素的情况下使 div 透明？
【发布时间】：2013-10-06 17:22:21
【问题描述】：

如何在 CSS 3 中使 div 透明而不影响子级

这是我的 HTML 代码：

<div id="icon">
   <ul>
      <li><a href=""><img src="Iconpaper.png"></a></li>
      <li><a href=""><img src="Movies.png"></a></li>
      <li><a href=""><img src="Phone.png"></a></li>
      <li><a href=""><img src="Stocks.png"></a></li>
      <li><a href=""><img src="Love.png"></a></li>
   </ul>
</div>

<div id="search">
    SEARCH
</div>

</div>

这是 CSS：-

#header{
   background-color:#000;
   width:1349px;
   height:60px;
   position:fixed;
   z-index:2;
   opacity:0.7;
   }
#icon{
   float:left;
   padding:10px;
   }
li{
   display:inline;
  }
#header img{
   width:35px;
   height:35px;
  }
#search{
   float:right;
   color:#e5e5e5;
   padding:20px;
   font-size:20px;
  }

所以，我想让#header div 透明和固定，而不影响#icon 和#search div。

【问题讨论】：

绝对是how to not apply opacity for child element? (and many, many others) 的副本。
如果你只是想让背景颜色透明，那么你可以使用rgba并去掉opacity。

标签： html css

【解决方案1】：

不要使用opacity，而是使用rgba()，例如background: rgba(0,0,0,.7)，其中a 代表alpha/opacity。所以改变下面的代码块像

#header{
   background-color: rgba(0,0,0,.7); /* 0.7 Opacity for black */
   width:1349px;
   height:60px;
   position:fixed;
   z-index:2;
}

【讨论】：

谢谢，这正是我所需要的。
@RahulKhatri 考虑通过单击我的答案旁边的勾号将答案标记为正确，这样可以帮助访问者参考
@Mr.Alien 谢谢！这是完美的——正是我所需要的！

【解决方案2】：

在 CSS 中，子项的不透明度始终根据其父项计算。因此，要回答您的问题，您不能将父级的不透明度设置为 0.5，而仍然让子级显示的不透明度为 1.0。

例子：

父元素：opacity: 0.5;（实际不透明度 = 0.5）
子元素：opacity: 1.0;（实际不透明度为0.5 * 1.0 = 0.5）

【讨论】：

【解决方案3】：

使用重复的半透明 png 作为背景或使用 rgba 颜色值。

【讨论】：