Hi folks,
Can anyone please help me achieve the transparent background like the one attached.
Many thanks
Well, I am not sure about the blur. That would probably take Javascript. You could use the CSS3 opacity property but for cross browser consistency and predictable results, I have simply tiled a tiny semi transparent png and it has worked well for me. I have found different browsers handle opacity differently and the png puts you more in control. Again, the blur is a whole different thing.
Hi,
I think you can make use of the Opacity property of CSS in creating transparent backgrounds.Set the value of Opacity to 0.5.
The blur or the glass effect can be done by JQuery plugins, thus making the image cross browser compatible.
Hope this helps,
Cheers
I’ve been having problems with IE6 and transparent pngs … so I just used gifs instead. This is probably a better idea though, heh.
No need to use gifs instead. IE6 never supported transparent pngs, so you have to use workarounds to make them work in that version. Google is full of results for a related search. But since I do not support IE6, that’s just one less thing to worry about.
Looking at the pic the OP posted, it seems having a solid background would not be a bad thing for browsers who can’t deal with either opacity or a semi-trans png.
If I needed this to work on as many browsers as possible without BS, I’d make a tiny semi-trans PNG (8x8 or 16x16 pixels or something based on 8’s) and tile it on the background of the element. For IE6, when I’m saving the PNG I set the background colour in the tools panel to white, and make sure the data in the PNG saves the background colour setting. IE6 will then show a solid white image. This way, no javascript hacks necessary, no BS in the code, and therefore no unexpected strangeness cross-browser. All those Javascript fixes seem to involve selling your soul and having problems somewhere else and extra HTTP requests for no good reason. Consider it a last-ditch effort if some client insists (and then charge them for it).
The disadvantages of this method:
-semi-trans PNGs are larger files, though tiling a smaller one helps a lot
-if the image doesn’t load, there is nothing to ensure contrast for the text… this would prolly be a deal-breaker for me actually.
Using CSS opacity, you have the problem of the children (like the text) also losing opacity. Not good.
If IE support really wasn’t an issue, there’s a way to use rgba(colour, opacity) where IE’s who don’t support that yet will show a solid background colour. But I recall it was tricky to get all non-supporting IE’s to show the background colour, though that might have been because I was adding a :hover style that screwed everyone up.