Transparent background, opaque elements

问题

I want to have an image background on body and a semitransparent background on main div, so that the image can be seen through it, but shaded. However, the easiest

body {
  background-image: ...
}

#main {
  background-color: #999;
  opacity: 0.9
}

will also make everything within #main to be opaque as well, such as any contained img.

How do you do what I describe?

Thanks

回答1:

rgba helps you, but it is not supported by all browsers

usage:

rgba(a,b,c,d), where a = red(0-255); b = green(0-255); c = blue(0-255), d = alpha opacity(0-1)

so if you want a 50% red background, you should use

background: rgba(255,0,0,0.5);

回答2:

If you can use CSS3 for your project you can use rgba()

#main {
  background-color: rgba(0, 0, 0, .5)
}

The syntax is rgba(Red, Green, Blue, Alpha). This will make the background of #main transparent but not the content.

Here is fiddle: http://jsfiddle.net/neilheinrich/FwxRX/

回答3:

If you create a semi transparent png file a couple of pixels large and in the colour you are after then add that as the background image of main you should get the desired result.

来源：https://stackoverflow.com/questions/7900757/transparent-background-opaque-elements