Is there a way with CSS3 to specify background image translucency?

I found background-color:rgba(), but this only specifies a background color's alpha. Is there something similar for the background image, when the image is specified using the CSS3 background-i开发者_C百科mage()? If there is no pure CSS3 solution, what's the most elegant way to do this?

Simply have a container the same size on top with a background-color fill of your percentage rgba white.

ie.

html {
    background-image: url(blah.jpg);
}

body {
    background-color: rgba(255,255,255,0.5);
}

Note that this technique won't work if you require the background image to be translucent on elements overlapping other elements.

You could add a div whose sole purpose is to be the background, and give it an

opacity: 0.5;

Then have a sibling div that contains your content positioned on top of it.

div.gallery   {
   background-image: url(...........);
   filter :alpha(opacity=0.8);
   opacity : .8;
}

Any children of this element inherit its opacity, if that is a problem do what JD Parsons said. The filter property is for IE. [example modified from CSS3 Visual Quickstart Guide]