shadowayex Posted May 13, 2010 Share Posted May 13, 2010 I have a div that I wanted to have a transparent background, and inside of it I have a h2 tag that is becoming transparent with it. I set the opacity back to 1.0 (and 100 for the IE filter), but the text is still transparent.What's the trick to getting the text opaque again? Link to comment Share on other sites More sharing options...
thescientist Posted May 13, 2010 Share Posted May 13, 2010 could you post code or link? Link to comment Share on other sites More sharing options...
shadowayex Posted May 13, 2010 Author Share Posted May 13, 2010 I'm using a host that automatically converts code to their standards, so it looks kind of messy and bad. But there's not much I can do about it: <HTML><HEAD><TITLE>Home</TITLE><STYLE type="text/css">body {background-image:url('Pics/schoolcolors.jpg');}h2.class1 {;}h1 {color:#FFFFFF;}h2 {color:#FFFFFF; opacity: 1.0; filter:alpha(opacity=100);}p {color:#FFFFFF;}div.trans_bg {background-color: #000000; opacity: 0.4; filter:alpha(opacity=40);}a:link {color:#FFFFFF;}a:visited {color:#FFFFFF;} </STYLE><META name=GENERATOR content="MSHTML 8.00.6001.18904"></HEAD><BODY><H2 class=class1><A href="Registration.html">Form Page</A> <A href="Contacts.html">Contacts</A></H2><bR /><H1>Welcome to the 40th Clay Central Class Reunion</H1><br /><div class="trans_bg"><h2>Forty years ago, we were marching into the high school gymnasium in Royal under the motto of, "Today Is the First Day of the Rest of our Lives." Forty years later, it will be fun to get together to see where time has taken all of us.</h2></div></BODY></HTML> Link to comment Share on other sites More sharing options...
jeffman Posted May 13, 2010 Share Posted May 13, 2010 Try this selector:div.trans_bg h2It should be more specific. Link to comment Share on other sites More sharing options...
real_illusions Posted May 13, 2010 Share Posted May 13, 2010 Opacity will make everything inside that div transparent.You can use the CSS3 technique for background opacity using RGBA, or use background png's. Link to comment Share on other sites More sharing options...
jeffman Posted May 13, 2010 Share Posted May 13, 2010 Opacity will make everything inside that div transparent.Yeah. real_illusions is right. I should have thought. It's not really an inheritance thing at all. Link to comment Share on other sites More sharing options...
shadowayex Posted May 13, 2010 Author Share Posted May 13, 2010 Try this selector:div.trans_bg h2It should be more specific.That didn't work =(As for the CSS3, IE doesn't have CSS3 and browser compatibility is kind of a good thing to retain in my case. Otherwise that'd work fine.I'd prefer not to use bg images, but I suppose I could. Link to comment Share on other sites More sharing options...
thescientist Posted May 13, 2010 Share Posted May 13, 2010 bg iamges seem to work pretty well for transparency, which is what I typically use. Link to comment Share on other sites More sharing options...
thescientist Posted May 13, 2010 Share Posted May 13, 2010 Opacity will make everything inside that div transparent.You can use the CSS3 technique for background opacity using RGBA, or use background png's.surely, not everything? The W3Schools tutorial for opacity has <p> text inside a transbox that's not transparent. Perhaps because they use font-weight: bold? Link to comment Share on other sites More sharing options...
real_illusions Posted May 13, 2010 Share Posted May 13, 2010 surely, not everything? The W3Schools tutorial for opacity has <p> text inside a transbox that's not transparent. Perhaps because they use font-weight: bold?There are work arounds such as absolute positioning and the bold text, and the bold text is what w3schools are using Link to comment Share on other sites More sharing options...
shadowayex Posted May 13, 2010 Author Share Posted May 13, 2010 Well, 1) Bolding the h2 did nothing and 2) is there an actual solution? Because I would've thought changing the opacity would've fixed the problem.Anyway, anything that'll function. Link to comment Share on other sites More sharing options...
thescientist Posted May 13, 2010 Share Posted May 13, 2010 try setting the font-weight of the heading to bold.edit: that was number 1! duh.... :)what about just bold <h2> text, and not trying to refix the opacity. What does your code look like before it gets formatted by your host? Link to comment Share on other sites More sharing options...
real_illusions Posted May 13, 2010 Share Posted May 13, 2010 Aren't headings 1 and 2 bold by default anyway?I'd personally go for the RGBA option, with a plain colour backup for those less-than-modern browsers. Link to comment Share on other sites More sharing options...
jeffman Posted May 13, 2010 Share Posted May 13, 2010 If you just want a plain color transparency, then a 1pixel x 1pixel png repeating background image sounds pretty harmless. Not so easy to change, but otherwise . . . Link to comment Share on other sites More sharing options...
Recommended Posts
Archived
This topic is now archived and is closed to further replies.