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 transparent并修复而不影响#icon和#search div。

Answer 1

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

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

Answer 2

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

示例：

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

Answer 3

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

如何在不影响CSS 3中的孩子的情况下使div透明？

3 个答案: