Jump to content

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 post
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 post
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 post
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 post
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 post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...
×
×
  • Create New...