html - how to make a div transparent without affecting the child in CSS 3? -
how make div transparent without affecting child in css 3
here's 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 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, want make #header div tranparent , fixed without affecting #icon , #search div.
instead of using opacity
, use rgba()
background: rgba(0,0,0,.7)
a
stands alpha/opacity. change below block of code like
#header{ background-color: rgba(0,0,0,.7); /* 0.7 opacity black */ width:1349px; height:60px; position:fixed; z-index:2; }
Comments
Post a Comment