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.
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;
}
Make it so the loading div / background image isn't a child of the div you're applying the lowered opacity to.
来源：https://stackoverflow.com/questions/9813716/how-can-i-allow-opacity-to-a-div-and-not-the-background-image