semitransparent div

[.rhavin grobert]

id like to have the following:

<div><p>test</p></div>

with the div having background #000000 and the text having color
#ff0000, so

div {background-color:#000000;}
p {color:#ff0000;}

now the problem:

i want to have the div semitransparent like this...
div {
background-color:#000000;
filter:alpha(opacity=77); -moz-opacity:0.77;
opacity:0.77; -khtml-opacity:0.77;
}

but i want to have the text at opacity 100%.

any ideas?

thx for any thoughts, .rhavin

 

[Jonathan N. Little]

id like to have the following:

<div><p>test</p></div>

with the div having background #000000 and the text having color
#ff0000, so

div {background-color:#000000;}
p {color:#ff0000;}

now the problem:

i want to have the div semitransparent like this...
div {
background-color:#000000;
filter:alpha(opacity=77); -moz-opacity:0.77;
opacity:0.77; -khtml-opacity:0.77;
}

but i want to have the text at opacity 100%.

any ideas?

You can't directly on the same DIV you have to use a transparent
background image for the DIV. Note MSIE<7 PNG transparency limitations.

 

[Neredbojias]

id like to have the following:

<div><p>test</p></div>

with the div having background #000000 and the text having color
#ff0000, so

div {background-color:#000000;}
p {color:#ff0000;}

now the problem:

i want to have the div semitransparent like this...
div {
background-color:#000000;
filter:alpha(opacity=77); -moz-opacity:0.77;
opacity:0.77; -khtml-opacity:0.77;
}

but i want to have the text at opacity 100%.

any ideas?

I goofed around with this a few months back and the only thing I got to
work was layering.

 

[Ben C]

id like to have the following:

<div><p>test</p></div>

with the div having background #000000 and the text having color
#ff0000, so

div {background-color:#000000;}
p {color:#ff0000;}

now the problem:

i want to have the div semitransparent like this...
div {
background-color:#000000;
filter:alpha(opacity=77); -moz-opacity:0.77;
opacity:0.77; -khtml-opacity:0.77;
}

but i want to have the text at opacity 100%.

any ideas?

thx for any thoughts, .rhavin

You need the text in a different element that's not a descendent of the
semi-transparent one, but stacked on top of it. z-index and position:
absolute can be used to achieve this.

See
http://groups.google.co.uk/group/co...25721/2c7cdcf4107b8d95?hl=en#2c7cdcf4107b8d95

 

[Toby A Inkster]

i want to have the div semitransparent like this...
div {
background-color:#000000;
filter:alpha(opacity=77); -moz-opacity:0.77;
opacity:0.77; -khtml-opacity:0.77;
}
but i want to have the text at opacity 100%.

Don't set any opacity -- leave it at 100%. Set background-color to
"transparent" and add an alpha-blended PNG background image.