Отсутствие непрозрачности на div внутри div с непрозрачностью

Мне нужно использовать asp.net ajax toolkit для задачи, а то, что я делаю, - отобразить div на весь экран, когда запускается контроль прогресса обновления. Основной div (который охватывает весь экран) имеет некоторую непрозрачность, но когда я пытаюсь иметь div внутри этого, тот также получает некоторую непрозрачность, хотя я не устанавливаю его в none;

Пример HTML:

<ProgressTemplate>
            <div class="updateProgressBox">
                <div class="updateProgressMessage">
                    <p>Processing request..</p>
                </div>
            </div>
</ProgressTemplate>

И CSS:

.updateProgressBox {
    top: 0px; 
    height: 100%; 
    background-color:Gray;
    opacity:0.7; 
    filter:alpha(opacity=70);
    vertical-align: middle; 
    left: 0px; 
    z-index: 999999; 
    width: 100%; 
    position: absolute;
    text-align: center;   
}

.updateProgressMessage {
    border: black 2px solid;
    background-color: #fff;
    z-index: 1000000;   
    padding: 20px;
    opacity:1.0; 
    filter:alpha(opacity=100);
    margin: 300px auto auto auto;
    font-weight: bold; 
    vertical-align: middle;
    width: 200px; 
    text-align: center
}

Что делать, чтобы div с сообщением не имел прозрачности и белого цвета фона?

Ответ 1

Чтобы устранить эту проблему, используйте свойство фона RGBA в родительском div background: rgba(64, 64, 64, 0.5). 64, 64, 64 - значения цвета RGB. и 0,5 - значение непрозрачности. Теперь родитель может иметь собственное значение непрозрачности, которое не будет унаследовано его дочерними элементами. Это полностью поддерживается FireFox, Opera, Chrome, Safari и IE9.

Проверьте рабочий пример http://jsfiddle.net/Rp5BN/

Для поддержки IE 5.5 до 8 нам нужно использовать градиентный фильтр CSS для конкретного поставщика: "Итак, вам нужно добавить это.

filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#7f404040, endColorstr=#7f404040);

Где 7f представляет 127, то есть 50% непрозрачность и 404040 - цвет.

Проверьте рабочий пример в IE http://jsfiddle.net/Rp5BN/2/

Ответ 2

opacity наследуется и не может быть reset.

Вы можете...

Используйте фоновое изображение 24-битного PNG с альфа-прозрачностью.
Сделать другой элемент не дочерним.
Используйте предложение Хусейна использования rgba().

Ответ 3

Для этого вам нужно использовать цвет RGBA на самом фоне, поскольку прозрачность изменяет альфа-канал для всех дочерних узлов внутри самого родительского элемента. Например.

.div {
    background-color: rgba(255,0,0, .5);
}