paulonline2501 Posted May 10, 2012 Share Posted May 10, 2012 hello everyone, im trying to get a div to be 50% transparent.i can get it to be 100% transparent by using the code below, but i want it to be only 50% transparent. works for 100% transparency: .header{background-color:#CCC;background: transparent;} doesnt work for 50% transparency: .header{background-color:#CCC;background: transparent 50%;} any recommendations?? the header in the example should be 50% transparent http://www.paulyouth...slucent-div.php best wishes, paulY Link to comment Share on other sites More sharing options...
eTianbun Posted May 10, 2012 Share Posted May 10, 2012 (edited) See: http://www.w3schools...image_trans...asp Edited May 10, 2012 by eTianbun Link to comment Share on other sites More sharing options...
paulonline2501 Posted May 10, 2012 Author Share Posted May 10, 2012 ...thanks, but ive tried that already. unfortunatly that method will make the text aswell as the background of the DIV transparent.this is not an acceptable solution.only the background should be transparent - the text should be unaffected. Link to comment Share on other sites More sharing options...
dsonesuk Posted May 10, 2012 Share Posted May 10, 2012 http://w3schools.invisionzone.com/index.php?showtopic=43367&pid=239374&st=0entry239374 Link to comment Share on other sites More sharing options...
Ingolme Posted May 10, 2012 Share Posted May 10, 2012 There are two options: Use the rgba() color format or use a transparent PNG image. Link to comment Share on other sites More sharing options...
paulonline2501 Posted May 10, 2012 Author Share Posted May 10, 2012 (edited) hi dsonesuk, ive tried to get your solution to work, but your writing is not easy to read just at the key point where your explaing putting the div inside another dummy div. can you explain again? this is what ive tried so far, but my text is transparent [which i dont want] aswell as the background. .header{background:#CCC;}.header{opacity:0.6; filter:alpha(opacity=60);}.header h1{opacity:1.0; filter:alpha(opacity=100);}<body><div class="container"> <div class="header"><h1>Header</h1></div> <div class="content"> <p>some example text....</p> <p>some example text....</p> <p>some example text....</p> <p>some example text....</p> </div></div></body> Edited May 10, 2012 by as_bold_as_love Link to comment Share on other sites More sharing options...
dsonesuk Posted May 10, 2012 Share Posted May 10, 2012 <style type="text/css">.header_bg{position:absolute;background-color: #ccc;opacity: 0.5;filter:alpha(opacity=50); left:0; right:0; top:0; z-index:0;bottom:0;}.header, .header h1{position:relative;}</style> <div class="header"><div class="header_bg"> </div><h1>Header</h1></div> <div class="content"> <p>some example text....</p> <p>some example text....</p> <p>some example text....</p> <p>some example text....</p> </div></div> Link to comment Share on other sites More sharing options...
paulonline2501 Posted May 10, 2012 Author Share Posted May 10, 2012 Outstanding dsonesuk!!! A note for any one whos interested: i just tried in IE7, Crome, Safari and my iphone- no problems at all. (much better than an image hack!) Link to comment Share on other sites More sharing options...
fromthericefields Posted May 12, 2012 Share Posted May 12, 2012 haven't tried it myself, but have heard of opacity: 50%; would this work? Link to comment Share on other sites More sharing options...
dsonesuk Posted May 12, 2012 Share Posted May 12, 2012 Yes! that works, THAT'S WHY I USED IT! but! as stated in post #3, if you use it for a container element that has text within it, the text BECOMES SEMI-TRANSPARENT AS WELL, that why you have to separate the two and place in individual element containers. Link to comment Share on other sites More sharing options...
fromthericefields Posted May 13, 2012 Share Posted May 13, 2012 Oh I see, useful information here, will need to keep in mind if ever faced with similar problem.Good coding Link to comment Share on other sites More sharing options...
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment
Create an account
Sign up for a new account in our community. It's easy!
Register a new accountSign in
Already have an account? Sign in here.
Sign In Now