Почему непрозрачность CSS влияет на div над ним? - PullRequest
Новая
       30

Почему непрозрачность CSS влияет на div над ним?

2 голосов
/ 24 июля 2010

У меня есть наложение внутри элемента HTML, а внутри этого наложения у меня есть элемент, содержащий сообщение.Но для некоторого резонанса верхний элемент получает также непрозрачность от элемента под ним.

РЕДАКТИРОВАТЬ: Я проверял это только с последним Firefox.

Вот пример кода CSS, чтобы объяснить проблему: 

.overlay {
    z-index: 1000;
    border: medium none;
    margin: 0pt;
    padding: 0pt;
    width: 100%;
    height: 100%;
    top: 0pt;
    left: 0pt;
    background-color: #fff;
    opacity: 0.6;
    cursor: wait;
    position: absolute;
}
.overlay .message {
    z-index: 1001;
    position: absolute;
    padding: 0px;
    margin: auto;
    width: 30%;
    top: 15%;
    left: 30%;
    text-align: center;
    color: #fff;
    border: 3px solid red;
    background-color: #fff;
    background: fuchsia;
    font-size: 18px;
    font-weight: bold;
    padding: 5%;
}

А вот и HTML-код: 

<div class="overlay">
    <div class="message">
        test
    </div>
</div>

1 Ответ

2 голосов
/ 24 июля 2010

Непрозрачность влияет не только на сам элемент, но и на все, что в наложении (поэтому message тоже). Это работает, если вы разделяете оверлей и сообщение: 

<div class="modal">
    <div class="overlay">overlay</div>
    <div class="message">message</div>
</div>

И CSS: 

.modal {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}
.overlay {
    /* … */
}
.message {
    /* … */
}

Здесь сообщение не является потомком оверлея и, следовательно, не зависит от стиля оверлея .

...