How to get opaque text on div with transparency? - html

Question

I did some searches on google for this and there are a lot of various examples, some outdated some not.
I also had a look at the example at the bottom on http://www.w3schools.com/Css/css_image_transparency.asp which is similar to what I want to achieve. In the example the text on the div is also a bit transparent but it's hard to see because it's black text on a white div.
I have a background image with a lot of black elements in it and on top of that a black div with 55% opacity, when I add white text on top of that some of the very dark elements in the background image is slightly visible through the white text which I don't want.
Anyone with a recent example/best practice on how to achieve this (either with transparent png or css)? It doesn't have to support IE 6..
Thanks in advance.

Answer 1

Milan is almost correct. You'll want to make the background of the transparent div transarent via RGB. For black that would be (0,0,0). To add transparency, you'd simply add a decimal (similar to 'opacity:.55' for CSS; so to get a 55% opaque black background, you'd use
background: rgba(0,0,0,0.55);
So, to make an example div with a 55% opacity background w/ white text, use:
.blackopaque {
background:rbga(0,0,0,0.55);
color:#ffffff;
}
The 'background' changes the background, and the color changes the color of the text (white, in this case).
Hope this helps!
Matt
EDIT: IE Support
Adding support to IE is easy, all you have to do is specifically target IE users with their own stylesheet for that element. Open up your theme's header file, let's say you have a stylesheet designed specifically for IE w/ a transparent PNG to get the transparent black effect, named IE.css. You'd want to insert this code below your existing CSS inclusion:
<!--[if IE]>
<link rel="stylesheet" type="text/css" media="all" href="<?php bloginfo( 'template_url' ); ?>/IE.css" />
<![endif]-->
This conditional stylesheet makes itself available only to IE users, so the rest of the ahem, more advanced browsers can enjoy RGBa.
For the IE stylesheet, you'd want something like this:
.blackopaque {
background:url('*link to your 55% opaque png file*')
color:#ffffff;
}
NOTE You'd only have to include that one rule in the IE stylesheet, just so that it overrides the default rule for that background.

Answer 2

RGBA isn't supported until IE9, so your best bet if you need to support earlier versions of IE is simply a semi-transparent PNG.

Answer 3

Sorry I thought text should be transparent, here is transparent background
#content {
position:relative;
z-index:1;
}
#content:before {
content:"";
position:absolute;
z-index:-1;
top:0;
bottom:0;
left:0;
right:0;
background:url(your_image.jpg);
opacity:0.7;
}