Jump to content

background: transparent; 50%


paulonline2501

Recommended Posts

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

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

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 by as_bold_as_love
Link to comment
Share on other sites

<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

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

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 account

Sign in

Already have an account? Sign in here.

Sign In Now
×
×
  • Create New...