Question

How can i allow opacity to a div and not the background image?

On an ajax request, the following class is applied to a selected div. All contents of that div become opaque. However, the background ajax loading indicator also becomes opaque. How can i make it that the background image does not become opaque?

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

(sorry, dont know why there are two opacity styles. Not a style-spert).

Here is a printscreen 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 by using only the single element that already exists without using a CSS3 solution… You’re already using JavaScript, so maybe you could create a box that contains that loading image in the background at the bottom of the page and hide it, then position it in the center of the division and un-hide it?

Anyways, 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;
}