Previous Message
Next Message

Transparent div with opaque text.

Sent by David Hucklesby on 30 August 2007 00:12


> On Wed, 29 Aug 2007 17:50:00 +0100, Dermot Ward wrote:
>> [...]I've been grappling with this
>> particular problem now for a couple of weeks so here goes with my first post. Is it
>> possible to have a semi - transparent box within a div, that allows the containing
>> div's content to partially show through the box, while the box retains full text
>> opacity?
>>
On Wed, 29 Aug 2007 11:43:58 -0700, I responded: 
>
> One way to do this might be to use two DIVs, one superimposed over
> the other. If one DIV has a background color and a fractional opacity, while the
> overlaid DIV has the text and (default) transparent background, I think that may work:
>
> HTML
> <div class="background"><!-- --></div>
> <div class="foreground"><p>Some text here ... </p></div>
>
> CSS
> .background {
> height: 10em;    /* or ??? */
> background-color: #fff;
> opacity: 0.6;
> }
> .foreground {
> margin-top: -10em;
> color: #000;
> }
>
> Haven't tried this, though. :)
>
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

Okay. I just tried my suggestion.

Works in IE 6/7 and Opera.
Fails in Moz/ FF/ NS7 and Safari. (Text is semi-opaque too.)

Cordially,
David
--

______________________________________________________________________
css-discuss [EMAIL-REMOVED]]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7 information -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Previous Message
Next Message

Message thread:

Possibly related: