Jump to content
paulonline2501

background: transparent; 50%

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

Share this post


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.

Share this post


Link to post
Share on other sites

There are two options: Use the rgba() color format or use a transparent PNG image.

Share this post


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

Share this post


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>

Share this post


Link to post
Share on other sites

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

Share this post


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.

Share this post


Link to post
Share on other sites

Oh I see, useful information here, will need to keep in mind if ever faced with similar problem.Good coding :)

Share this post


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