View Full Version : (new?) answer to transparent td bg's

04-26-2004, 01:11 PM
a while back i was trying to get a span transparent and the text within/above it fully opaque without absolutely positioning everything. i did several searches and found the same issue for a thousand others, who were (almost all) advised to relatively position the text within another div or span (most of the people asking were using table cell backgrounds they wanted transparent) - i think that worked, but just now i accidentally found another, simpler workaround (i looked again and didn't see anyone who posted this particular fix, sorry if this is already common knowledge)

if you have the transparent div inside another div without transparency, put the text before/above the opening div tag of the transparent element. you'll have to use positioning (or if that's inconvenient, i'd guess padding or margins would work as well) to "lift" the transparent element up a bit and show up behind the text, or just put the text one line below the transparent element, like so:

<div id="opaquediv" style="width:200px;height:200px;background-color:navy;">some text or just &nbsp;<div id="transparentdiv" style="width:100%;background-color:white;filter:alpha(opacity=50);"></div></div>

<div id="opaquediv2" style="width:200px;height:200px;background-color:navy;">the text that you want to appear in front of transparentdiv1<div id="transparentdiv2" style="width:100%;background-color:white;filter:alpha(opacity=50);"></div></div>

hmm it seemed simpler than the relative thing at the moment...