brgivens
asked on
Opaque text on translucent background
Hi,
I'm trying to figure out the CSS for opaque text on a translucent background in Mozilla. Here's a well-written page (not my work) that shows what I want: http://www.domedia.org/oveklykken/css-transparency.php
The code shown on that page does produce opaque text in IE but not Firefox. Any suggestions on what to change so it will also work in Firefox?
I'm trying to figure out the CSS for opaque text on a translucent background in Mozilla. Here's a well-written page (not my work) that shows what I want: http://www.domedia.org/oveklykken/css-transparency.php
The code shown on that page does produce opaque text in IE but not Firefox. Any suggestions on what to change so it will also work in Firefox?
You can use a translucent PNG image as background, that works great in all browsers except for IE.
ASKER CERTIFIED SOLUTION
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
SOLUTION
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
ASKER
I appreciate the input, but I need a solution that uses neither an image nor absolute positioning. Because of the complexity of the page I really need to be able to simply set a property of the child object to adjust its opacity.
SOLUTION
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
I agree with GrandSchtroumpf, there is no direct way to do it.
It's up to you. You can add the complexity of the suggested solutions to an already complex page, or you can simplify other parts of the page and add this new complexity, or you can renounce to this effect.
In my opinion:
- The solution suggested by GrandSchtroumpf is the best for you, since it will add the lowest complexity to page layout. You only need to use different techniques to obtain translucency (IE with filters, other browsers with alpha transparent PNG images).
- Sean solution is elegant and CSS only. You only need to know the final width and height of the DIV block.
- My solution is CSS only, you don't need to know DIV size. You only need to repeat twice the DIV content.
It's up to you. You can add the complexity of the suggested solutions to an already complex page, or you can simplify other parts of the page and add this new complexity, or you can renounce to this effect.
In my opinion:
- The solution suggested by GrandSchtroumpf is the best for you, since it will add the lowest complexity to page layout. You only need to use different techniques to obtain translucency (IE with filters, other browsers with alpha transparent PNG images).
- Sean solution is elegant and CSS only. You only need to know the final width and height of the DIV block.
- My solution is CSS only, you don't need to know DIV size. You only need to repeat twice the DIV content.
"-moz-opacity and opacity lets all the children of the styled container inherit the transparency, can't find a way around this."