background transparency crossbrowser especially ie

I am having a huge problem figuring out how to use a transparent background color for my website. I can do it with the background:rgba style attribute which works for all browsers expect ie. It very hard to do it in IE though. You can use opacity or filt开发者_如何学Pythoner:alpha but this makes everything within the div transparent. I dont want that I only want the background color to be transparent. How do I do this please help Ive been looking for explanations on the internet and cannot find a solution.

You can work around this by layering two separate DIVs, one for the transparency and one for the actual content:

.container {
  position: relative;
}

.container .transparency {
  position: absolute;
  z-index: 1;
  background-color: ...;
  opacity: ...;
  /* apply same width and height as parent DIV */
}

.container .content {
  position: absolute;
  z-index: 2;
  /* apply same width and height as parent DIV */
}

You can set your background image's opacity to 50% with Photoshop and then use it.

If you want to change the opacity using Jquery or JavaScript you can change background image to opaque version of the same background image.

I'd suggest using a large semi-transparent flat-color PNG for the IE part. Depending on how far back you need to go in terms of old IE versions, you may also have to use some JS to get the transparent PNG to work.