lindm Posted January 5, 2010 Share Posted January 5, 2010 Have a problem that the text in a container also gets the opacity of the parent container. I want the opacity of the text to be 100 or 1 depending on browser. Se code below. <html> <head> <style type="text/css"> span#vtipc { position: absolute; left: 5px; padding: 16px; background-color: black; -moz-opacity: 0.75; opacity:.75; filter: alpha(opacity=75); width:400px; z-index: 9999; } span#vtip { font-size: 10px; color:#FFF; } </style> </head> <body> <span style="font-size:36px"> BACKGROUND TEXT</span> <span id="vtipc"><span id="vtip">TIP TEXT</span></span> </body> </html> Quote Link to comment Share on other sites More sharing options...
haku Posted January 6, 2010 Share Posted January 6, 2010 An element can never have a higher opacity than it's parent. So if the container has 50% opacity, then the text at 100% opacity will only have 50% overall opacity. So to do what you want, you have to put your text outside the container, then use either relative or absolute positioning to move the text over top the container. The problem however is that you can't have dynamic lengths of text or your positioning will get messed up, unless you use javascript to change the size of the container as necessary. But this won't work with any users who have javascript turned off. Quote Link to comment Share on other sites More sharing options...
TheFilmGod Posted January 6, 2010 Share Posted January 6, 2010 OR, you could just use a png image with partial transparency. I understand IE6 will not support for this, but then again, I'm sure getting absolute/relative positioning to work with JavaScript in IE6 is impossible as well. It reference to Haku's method: An element can never have a higher opacity than it's parent. So if the container has 50% opacity, then the text at 100% opacity will only have 50% overall opacity. So to do what you want, you have to put your text outside the container, then use either relative or absolute positioning to move the text over top the container. The problem however is that you can't have dynamic lengths of text or your positioning will get messed up, unless you use javascript to change the size of the container as necessary. But this won't work with any users who have javascript turned off. This method will work. However, there is a better way of doing this. <div class="parent"> <div class="semi-transparent"></div> <div class="main-content"> .... content ...... </div> </div> /* Now just add some css: */ .parent { position: relative; } .semi-transparent { opacity: 0.5; background: blue; height: 100%; position: absolute; } This may not work because I am not sure if the absolute positioned div will stretch vertically to fit the parent. I rarely if ever use absolute positioning - it should rarely be used. Keep it simple kid. Use a png image. Quote Link to comment Share on other sites More sharing options...
haku Posted January 6, 2010 Share Posted January 6, 2010 I'd actually agree with your first method - using a semi-transparent .png for the background, and that's what I do and have done in the past. It's the most reliable, though it requires a fix for IE6. Quote Link to comment Share on other sites More sharing options...
lindm Posted January 6, 2010 Author Share Posted January 6, 2010 Thanks for your answers! Seems like the png is the easiest solution. Quote Link to comment Share on other sites More sharing options...
Recommended Posts
Join the conversation
You can post now and register later. If you have an account, sign in now to post with your account.