Нет прозрачности на div внутри div с непрозрачностью - PullRequest
Новая
       6

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

15 голосов
/ 28 февраля 2011

Я должен использовать инструментарий asp.net ajax для задачи, и я делаю, чтобы отображать 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 с сообщением не было прозрачности и белого цвета фона?

Ответы [ 3 ]

37 голосов
/ 28 февраля 2011

Чтобы устранить эту проблему, используйте свойство фона RGBA в родительском div background: rgba(64, 64, 64, 0.5).64, 64, 64 - значения цвета RGB.и 0,5 - значение непрозрачности.Теперь parent может иметь свое собственное значение непрозрачности, которое не будет наследоваться его дочерними элементами.Это полностью поддерживается 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/

10 голосов
/ 28 февраля 2011

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

Вы можете ...

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

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

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