Hello. Can anyone tell me how to make a div's background transparent, but with a tint of color, such as black. I've tried this using CSS although I can only get the div to be either transparent or filled with color.
Thanks for the help!
views:
463answers:
6
+3
A:
You can use opacity (and its IE sibling alpha) for that.
Quirksmode.org has a good list of how to achieve that consistently in most browsers.
Pekka
2010-04-07 18:05:19
Not a great solution if you want *only* a background tinted, but it will work.
Atømix
2010-04-07 18:26:41
@Atomiton true. I sort of overread that part - to tint a background in a dynamically sized element, the PNG is definitely the way to go, taking into consideration @bobince's comments. It's still too early for `rgba`, as no IE supports it - otherwise, it would be the most elegant way hands down.
Pekka
2010-04-07 18:33:54
+3
A:
Or you can use a PNG semi transparent image. Often the easiest way out, cause when playing with opacity you also change the opacity of the text.
Terw
2010-04-07 18:07:21
Good point. Only thing to notice, semi-transparent PNGs need a workaround in IE6 to work. And a word of warning, never combine semi-transparent PNGs with `opacity`, it acts up in all IE browsers including 8. Use either one method or the other but never the both combined in one element.
Pekka
2010-04-07 18:09:01
Make sure you use a program like PNGOutWin (http://www.ardfry.com/pngoutwin/) to compress the image before using it so you don't chew up all your bandwidth though.
animuson
2010-04-07 18:09:06
+1
A:
http://www.w3schools.com/Css/css_image_transparency.asp has some examples
Patrick
2010-04-07 18:08:06
+2
A:
There's opacity as per Pekka's answer, but it will make the content of the div transparent as well as the background. If that's not what you want, you could:
have two divs, one with the opacity/alpha acting as a background, and another solid one for the content positioned on top of it. However the positioning can be tricky for variable-size elements. Or,
use a semi-opaque background, either by using an
rgba()colour (in browsers other than IE), or a PNG background image with an alpha channel (which works in IE7-8 but needs anAlphaImageLoaderfix for IE6, which also means you have to make the image as large as you could possibly need it, as AlphaImageLoader won't tile).
bobince
2010-04-07 18:12:17
+1
A:
There is one more option ( although not supported in all browsers ). Use rgba():
/* apply a shade of seafoam green (50% transparent) to "tinted" class */
.tinted {
background-color: rgba(129,254,188,0.5);
}
Here's a nice easy to read article on a few methods.
Things are a whole lot easier if you don't care about IE6.
Atømix
2010-04-07 18:25:26
A:
Here is a jQuery plugin that will handle everything for you, Transify http://jorenrapini.com/blog/css/transify-a-jquery-plugin-to-easily-apply-transparency-opacity-to-an-elements-background
I was running into this problem every now and then, so I decided to write something that would make life a lot easier. The script is less than 2kb and it only requires 1 line of code to get it to work, and it will also handle animating the opacity of the background if you like.
joren
2010-10-25 13:58:48