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

Question

如何在不影响 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。

Answer 1

而不是使用opacity，使用rgba()like background: rgba(0,0,0,.7)wherea代表 alpha/opacity。所以改变下面的代码块，比如

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

Answer 2

In CSS, a child's opacity is always calculated based on its parent. So to answer your question, you cannot set a parent's opacity to 0.5 and still have the child display with an opacity of 1.0.

Example:

• Parent element: opacity: 0.5; (actual opacity = 0.5)
• Child element: opacity: 1.0; (actual opacity is 0.5 * 1.0 = 0.5)

Answer 3

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