Transparent div background, with a tint of color?

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 fo开发者_JAVA技巧r the help!

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.

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:

1. 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,

2. 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 an AlphaImageLoader fix for IE6, which also means you have to make the image as large as you could possibly need it, as AlphaImageLoader won't tile).

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.

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.

http://www.w3schools.com/Css/css_image_transparency.asp has some examples

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.