Как я могу разрешить непрозрачность div, а не фоновое изображение?

Question

Как я могу разрешить непрозрачность для div, а не фоновое изображение?

По запросу 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 Я придумал:

.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

Посмотрите по этой ссылке http://robertnyman.com/2010/01/11/css-background-transparency-without-affecting-child-elements-through-rgba-and-filters

Answer 3

Сделайте так, чтобы загрузка div / background background не была дочерней по отношению к div, к которому применяется пониженная прозрачность.