How can I resolve the opacity of a div and not a background image?

Question

How can I resolve the opacity of a div and not a background image?

In an ajax request, the following class is applied to the selected div. The entire contents of this div becomes opaque. However, the ajax background loading indicator also becomes opaque. How can I make the background image not become opaque?

.ajax-mask { opacity: 0.5; filter: alpha(opacity=50); background: url('/Images/Ajax/Ajax.gif') no-repeat center center; } 

(sorry, I don’t know why there are two opacity styles, not spert-style).

Here is a print screen showing what it currently looks like. The mask is applied and the indicator should be bright red.

Answer 1

Well, I can't think of any ways to do this using only one element that already exists without using a CSS3 solution ... You are already using JavaScript, so maybe you can create a window that contains the loading image in the background at the bottom pages and hiding it, then place it in the center of separation and open it?

Anyway, here's the CSS3 solution I came up with:

 .ajax-mask { position: relative; } .ajax-mask:after { background: rgba(255, 255, 255, 0.5) url('/Images/Ajax/Ajax.gif') no-repeat center center; content: " "; position: absolute; top: 0; right: 0; bottom: 0; left: 0; } 

Answer 2

Make sure the boot div / background image is not a child of the div to which you apply lower opacity.

Answer 3

Have a look at this link http://robertnyman.com/2010/01/11/css-background-transparency-without-affecting-child-elements-through-rgba-and-filters