Apply opacity to background-image?

[tonynoriega]

is it possible to apply opacity to a div element background image?

or do i have to lay one div, then another over that with 50% opacity?

i.e.

#div1 {
width:300px;
height:100px;
background: url(rectangle.gif) center no-repeat;
]

#div2 {
width:300px;
height:100px;
background:white;
filter:alpha(opacity=50);
-moz-opacity:.50;
opacity:.50;
}

is that right?

[Shores]

Why not simply modify the background image?

The technique you're proposing does indeed work, but it's very heavy on the browser.