Opacity on Background
with Fully Opaque Text
This opacity background with fully opaque text works in Mozilla and IE.
This is what we really want, opacity applied to the background but not applied to the text. Here it is. But, don't get too excited. It's not intuitive and does take a little work.
We are using position:relative:top:-225px.
The image is 300 x 225 so we are
overlaying the fully opaque text on top of the image that has the opacity applied.
In IE we can simply specify position:relative and
it will figure the rest out. In Mozilla we have to
give it a starting position. Also, we gave our paragraph
a width confined to the width of the image. This background opacity with fully opaque text technique works in Mozilla and IE.
Copy and paste this in your Blog or Web page.
It will look like this.
This opacity background with fully opaque text works in Mozilla and IE.
50% Opacity on Background with Fully Opaque Text
This opacity background with fully opaque text works in Mozilla and IE.
75% Opacity on Background with Fully Opaque Text
This opacity background with fully opaque text works in Mozilla and IE.
90% Opacity on Background with Fully Opaque Text
This opacity background with fully opaque text works in Mozilla and IE.
No Opacity Applied
This is the image without opacity applied.
A Fun Adventure in Opacity
I am a child
I am a child
Or...
I am a child
I am a child
OK, that was fun. Opacity can be fun. While opacity is not inherited the parent/child relationship is what hangs us up when we try to make it do what it doesn't really want to do. The blogging tool gets in the way a little bit here.
CSS Opacity Applied to Background has more copy and paste examples.