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

を使用する代わりに、alpha/opacity を表すlikeを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 カラー値を使用します。