PDA

View Full Version : A way to make the background color of a div transparent, but not the text color



Atolar
03-14-2006, 11:38 AM
I know this technically isn't possible, but is there a way to go around css codes to make the background color transparent, but keep the text color the same? I have tried multiple things, but I need to get it to work on this tooltip script: http://www.dynamicdrive.com/dynamicindex5/dhtmltooltip.htm .

Any ideas?

Atolar
03-14-2006, 11:40 PM
Anybody... somebody... nobody?

mwinter
03-15-2006, 02:19 AM
I know this technically isn't possible, but is there a way to go around css codes to make the background color transparentCSS has the transparent value precisely for the reason of using transparent backgrounds. However, it doesn't seem like a good thing to do in this case as it's likely render the contents of a box unreadable when positioned over other content.


but keep the text color the same?The same as what?

Mike

Atolar
09-10-2006, 04:13 AM
as in, if you set a whole div to 50% opacity, the text gets set to 50% opacity and leaves it impossible to read, so how do you make it so that the text is 100% opacity, while the bg is 50%?

mwinter
09-10-2006, 12:28 PM
as in, if you set a whole div to 50% opacity, the text gets set to 50% opacity and leaves it impossible to read, so how do you make it so that the text is 100% opacity, while the bg is 50%?

Oh, you meant translucency. You'll have to apply the opacity declaration to a separate element and position one element on top of the other.

Mike

Atolar
09-13-2006, 11:05 PM
how would i do that? ( can you post an example? )

mwinter
09-15-2006, 12:47 AM
It seems to me that supporting IE limits your options quite a bit, namely that you must explicitly specify the height of the region.

In principle, you could write:



.container {
position: relative;
}
.background {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
opacity: 0.5;
filter: progid:DXImageTransform.Microsoft.Alpha(opacity=50);
}



<div class="container">
<div class="background"></div>
<div class="container">
<!-- content -->
</div>
</div>

applying whatever background colour to the first div child element you liked. However, IE's poor CSS support means that it wouldn't cover the element. In fact, even specifying 100% for the height property (if the outer container had an explicit, non-percentage height) wouldn't force it to work. Instead, you would need to apply a length value in em or px units, which would be problematic for browsers that don't support the min-height property if the container could grow (it contained text, for example).

If this isn't essential, one alternative would be to use a PNG with alpha transparency. The style declaration that applied that background image could be overridden for IE to avoid that nasty grey, and work everywhere else (including IE7, which will support PNG images properly):



.faded-background {
background: #rrggbb url(alpha-background.png);
color: #rrggbb;
}
* html .faded-background {
background-image: none;
}



<div class="faded-background">
<!-- content -->
</div>

The solid background colour you choose would either be a solid colour similar to the one used in the image, or transparent (if appropriate).

Mike

blm126
09-15-2006, 01:03 AM
It seems to me that supporting IE limits your options quite a bit, namely that you must explicitly specify the height of the region.

Not true


An object must have layout for the filter to render. A simple way to accomplish this is to give the element a specified height and/or width. However, there are several other properties that can give an element layout. For more information on these other properties, see the hasLayout property.

I have found the best way to give an element "layout" is to add

display: inline-block;
to it's css


In principle, you could write:


.container {
position: relative;
}
.background {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
opacity: 0.5;
filter: progid:DXImageTransform.Microsoft.Alpha(opacity=50);
}


Be careful. IE has a major bug that causes grave overflow problems when filters are applied to an absolutly positioned elements.

mwinter
09-15-2006, 01:20 AM
It seems to me that supporting IE limits your options quite a bit, namely that you must explicitly specify the height of the region.

Not true

Do you even know why I came to that conclusion?



I have found the best way to give an element "layout" ...

This has got nothing to do with IE's "has-layout" silliness.

To span the contents (as a background) the element must be given some sort of height property value as paired offset properties isn't supported in IE. If the container has an explicit height property value that is not auto or a percentage, then any descendant that considers that element to be its containing block will use the explicit height to calculate any percentage height. Therefore, the "background" should be able to use a value of 100% and receive the parent height, but this doesn't happen; a bug, no doubt. This is the reason why the explicit (non-auto, non-percentage) height is required.



Be careful. IE has a major bug that causes grave overflow problems when filters are applied to an absolutly positioned elements.

Absolute positioning can't be avoided (and didn't seem to be an issue here). The background cannot be applied to a parent element as it will add translucency to all descendants. Instead, it must be applied to a sibling (or child) of the content, and then repositioned. Using relative positioning would reserve space before being moved, which is, in all likelihood, undesirable.

Mike

jscheuer1
09-15-2006, 08:41 AM
This whole thing is much more easily done in IE using the alpha image loader filter. Instead of using the alpha(opacity) filter. It is still hard but, at least you do not need to use overlapping elements. If an element is absolutely or relatively positioned the alpha image loader filter may be applied to it using a semi transparent .png of the desired color and opacity. It will appear as if it were a background. In other browsers, it may be used as an actual background image. Care must be taken in IE that no actual background is assigned to the element.


<style type="text/css">
#semiTrans {
width:100%;
background:url('images/semi_trans.png');
}
</style>
<!--[if IE]>
<style type="text/css">
#semiTrans {
filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='images/semi_trans.png', sizingMethod='scale');
background:;
}
</style>
<![endif]-->

then for a td in an absolutely positioned table:


<td id="semiTrans" align="center"
valign="middle"> . . .

This is a bit of an oversimplification of what I did but, enough to see how to apply this to other content.

mwinter
09-15-2006, 01:24 PM
This whole thing is much more easily done in IE using the alpha image loader filter.

If, and only if, a transparent background is an acceptable fallback. If a background colour would be required to view the foreground content, then using that filter wouldn't be a good idea: with ActiveX disabled, the filter won't be used.



If an element is absolutely or relatively positioned the alpha image loader filter may be applied to it using a semi transparent .png of the desired color and opacity.

Relatively-positioning an element does not give it "layout" (what a stupid term). See the MSDN documentation for the hasLayout property (http://msdn.microsoft.com/workshop/author/dhtml/reference/properties/haslayout.asp).



background:;

Properties must always have values. In this instance, it should be the keyword, none.

Mike