我如何允许不透明度而不是背景图像？

Question

我如何允许不透明度而不是背景图像？

在ajax请求中，以下类适用于选定的div。该div的所有内容都变得不透明。但是，背景ajax加载指示器也变得不透明。我如何才能使背景图像不会变得不透明？

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

（抱歉，不知道为什么有两种不透明样式。不是样式专家。）

这是一个打印屏幕，显示它目前的样子。应用蒙版，指示灯应为鲜红色。

Answer 1

好吧，我想不出任何方法可以通过仅使用已经存在的单个元素而不使用CSS3解决方案......你已经在使用JavaScript了，所以也许你可以创建一个包含它的框在页面底部的背景中加载图像并将其隐藏，然后将其放置在分区的中心并取消隐藏它？

无论如何，这是我提出的CSS3 solution：

.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

使加载div /背景图像不是你正在应用降低的不透明度的div的子项。

Answer 3

查看此链接http://robertnyman.com/2010/01/11/css-background-transparency-without-affecting-child-elements-through-rgba-and-filters