Manipulating Opacity
Any one who has worked with CSS opacity has, most likely run into this problem. Using:
div{
filter:alpha(opacity=60);
-moz-opacity:0.60;
opacity:0.60;
}
to make a transparent background. It works great in all browsers, but have you ever tried putting text in that div? Right, it applies the opacity to everything inside the div as well. So then you try something like this to bring the opacity level back up to nornal:
div h1{
filter:alpha(opacity=100);
-moz-opacity:1;
opacity:1;
}
That, in theory should work, but it doesn’t. So then you try to up the opacity to 140 & 1.4 to try and account for the extra transparency… but that doesn’t work either. So you settle on using a small opacity level to read the text or use a background image.
Thanks to a challenge issued by a friend at Sporting News we now have a technique, without using any extra markup, to have your opacity without dimming the “containing” text. Why is containing in quotes? Well, you’ll see.
First off, here’s the live example
CSS
body{
background:#5A6163 url(bg_floral.gif) no-repeat 0 0;
}
a#skip-link{
filter:alpha(opacity=60);
-moz-opacity:0.60;
opacity:0.60;
background:#000;
display:block;
height:8em;
margin:70px 0 0 0;
text-indent:-9999px;
}
div#branding{
position:absolute;
top:70px;
height:8em;
width:98%;
}
div#branding h1{
font-size:1.8em;
padding:.5em 0 0 .5em;
}
div#branding h1 a{
color:#fff;
text-decoration:none;
}
WordPress really sucks at displaying HTML code, so you can just view source on the live example.
It’s very simple HTML, just a skip to content link, div called “branding” and an H1 link inside of branding. I also added some other stuff to jazz it up a bit.
Tested in FF2, IE7, IE6, Safari 3 with no errors.
Clean code will transcend browsers
You can leave a response, or trackback from your own site.
« Microsoft Expands Support for Web Standards | On Social Networking »
|
Comments (4)
|
Leave a Reply
I ran into this with my new design. IE also turns off anti-aliasing with text in a container with the filter property.
The best bet is to use a semi-transparent PNG for the background. Yes, it doesn’t work in IE6, but I’ve dropped support for that browser. Time to move forward.
I saw something similar to this just the other day, but last year came up with my own method that I still think is better/easier. All you need is a transparent .png for modern browsers, including IE7, and the filter property (in which child elements can be set back to full opacity, unlike in CSS opacity).
Have a look at my solution and examples here: http://www.unintentionallyblank.co.uk/2007/05/07/cross-browser-background-transparency-with-css/
Ah, avoid images when you can use straight CSS! Think of the client who doesn’t have Fireworks or Photoshop. Simple HTML/CSS, that’s the answer, it’s fast, lighter and easier to change.
Ah! Avoiding images is not such a bad thing, though I wouldn’t say to do it at all costs! My solution will cover the background of any div, regardless of height or width, whereas you need to know the height that you want, so it all depends on what you need from your solution.