A way to make the background color of a div transparent, but not the text color

[Atolar]

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/dynamici...tmltooltip.htm .

Any ideas?

[Atolar]

Anybody... somebody... nobody?

[mwinter]

I know this technically isn't possible, but is there a way to go around css codes to make the background color transparent

CSS 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]

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]

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]

how would i do that? ( can you post an example? )

[mwinter]

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]

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]

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]

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.