Comments on: Using CSS to add opaque text to transparent backgrounds

By: mjw

mjw — Fri, 03 Sep 2010 17:46:23 +0000

Thanks for posting this. It included the little bit that I needed to know to complete something I’m working on.

By: Lee

Lee — Fri, 07 Aug 2009 10:49:56 +0000

Hey all,

to get the filter working in all versions of IE, just add a zoom:1 entry to the css class. Happy days.

By: Michael

Michael — Sun, 29 Mar 2009 15:58:44 +0000

Thanks Lindsay. This wasn’t actually written as a tutorial but as a way of recording what I’d done (this is my personal blog, not an educational tool), and published in case others found it useful (which you did).

The reason the html isn’t shown is because (without a plugin at least) WordPress tries to render it, which causes no end of trouble.

When I updated the post the other day I did think I should make it clearer, so if I get a chance I’ll see if I can find a good way of displaying html in WordPress posts.

By: lindsay

lindsay — Sun, 29 Mar 2009 03:40:02 +0000

Hey.. I hate to tell you this, but looking at your source code was easier for me to understand what you were trying to say than reading your tutorial. I think it would be easiest to understand if you actually put the HTML code and the CSS and explain it that way…

I must have tried 5 times to do what you said in your tutorial, then i saw where you used the transparent BG with the opaque text, looked at your source and then copied that and worked with it that way.

just a little suggestion.. Its a GREAT technique, and the ONLY one that I have seen that has worked thus far.. So THANKS for posting.. Just maybe add a little more info to creating the HTML

By: Michael

Michael — Tue, 27 Nov 2007 23:50:38 +0000

Thanks Graham, I’ll give that a go.

By: Graham

Graham — Tue, 27 Nov 2007 19:10:57 +0000

Michael,
I think all you need to do to get opacity working for IE is add “filter: alpha(opacity = 20);” to your #titleBox declaration, so it would look like this:

#titleBox {
opacity:0.2;
filter: alpha(opacity = 20);
color:#fff;
}
Give it a whirl …
-graham