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.