how to make a div transparent without affecting the child in CSS 3?

Question

how to make a div transparent without affecting the child in CSS 3

here's my HTML code:

<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>

and here's the 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;
  }

so, I want to make the #header div tranparent and fixed without affecting the #icon and #search div.

Definitely a duplicate of [how to not apply opacity for child element?](http://stackoverflow.com/questions/4182304/how-to-not-apply-opacity-for-child-element) ([and many, many others](https://www.google.co.uk/search?q=opacity+children+stack+overflow)). — David Thomas, Oct 06 '13 at 17:29
If you just want to make the background color transparent, then you could use `rgba` and remove the `opacity`. — t.niese, Oct 06 '13 at 17:53

score 2 · Accepted Answer · answered Oct 06 '13 at 17:54

2

Instead of using opacity, use rgba() like background: rgba(0,0,0,.7) where a stands for alpha/opacity. So change the below block of code like

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

answered Oct 06 '13 at 17:54

Mr. Alien

153,751
34
298
278

Thanks, thats the exact thing i needed. – Rahul Khatri Oct 06 '13 at 18:32
@RahulKhatri consider marking the answer as correct by clicking on the tick besides my answer, this way it will help fuure visitors to refer – Mr. Alien Oct 07 '13 at 02:54

score 0 · Answer 2 · answered Oct 06 '13 at 17:50

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)

score 0 · Answer 3 · answered Oct 06 '13 at 18:03

0

Use a repeating semi-transparent png for the background or use rgba color value.

answered Oct 06 '13 at 18:03

Jeffpowrs

4,430
4
30
49

how to make a div transparent without affecting the child in CSS 3?

3 Answers3