IMG not showing above background color?

I have 3 divs, each with a z-index higher than the previous and all overlain on eachother.

The bottom div has an image, the next div has a background-color with opacity:0.7 and the topmost div has another image. The pr开发者_如何学Pythonoblem is the top-most image also appears underneath the background-color of the div beneath it, in Chrome, FF and IE.

Is there a workaround to allow the top most image be displayed on top as it should?

I guess I could just replace the background-color with a plain img.