Удаление непрозрачности из класса детей - PullRequest
Новая
       0

Удаление непрозрачности из класса детей

2 голосов
/ 08 декабря 2011

Я создал небольшой скрипт лайтбокса, сам скрипт работает нормально, но проблема в том, что класс lightbox, заполняющий весь экран, должен быть полупрозрачным, и если я сделаю это, lightbox-image станет полупрозрачным, как Что ж. Я попытался добавить opacity: 1; к lightbox-image, но это не сработало. Вы можете помочь?

HTML выглядит так: 

<div class="lightbox">
    <div class="lightbox-image">
        <p>Something here</p> 
    </div>
</div>

CSS: 

.lightbox {
    display: none;
    position: absolute;
    width: 100%;
    top: 0;
    left: 0;
    height: 100%;
    background-color: #000;
    z-index: 1000;
    opacity: 0.9;
    filter: alpha(opacity=90);
}

.lightbox-image {
    position: fixed;
    display: none;
    width: 600px;
    text-align: center;
    z-index: 1001;
    background-color: #000;
    margin-top: 100px;
    margin-left: auto;
    margin-right: auto;   
}

Ответы [ 2 ]

2 голосов
/ 08 декабря 2011

Непрозрачность, установленная для родительского элемента, также влияет на непрозрачность любых дочерних элементов.Простое решение здесь состоит в том, чтобы удалить изображение лайтбокса div из родительского элемента: 

<div class="lightbox"></div>
<div class="lightbox-image">
    <p>Something here </p> 
</div>

Макет останется таким же, как и раньше, но непрозрачность фона теперь будет зависеть от изображения.

2 голосов
/ 08 декабря 2011

Вы не можете этого сделать, потому что у родителя есть opacity:0.9, поэтому все дочерние объекты будут наследовать это свойство (и вы не можете назначать разные прозрачности дочерним элементам).Вы можете использовать в качестве цвета фона rgba, т.е. 

.lightbox
{
    display:none;
    position:absolute;
    width:100%;
    top:0;
    left:0;
    height:100%;
    background-color:rgba(0,0,0,0.9);
    z-index:1000;
}

... и, как запасной вариант (т.е. для IE: D), прозрачное повторяющееся изображение размером 1 пиксель

...