лайтбокс: проблема в прозрачности остальной части экрана - PullRequest
Новая
       16

лайтбокс: проблема в прозрачности остальной части экрана

0 голосов
/ 21 сентября 2011

Разработка веб-сайта, на котором я использовал много фона: rgba во многих местах. Поэтому, когда я попытался сделать лайтбокс, в котором я использую background: rgba(0, 0, 0, 0.6) !important;, чтобы сделать весь экран прозрачным -- не работает, поскольку фон от других элементов применяется (как и ожидалось).

Пытался использовать z-index для реализации лайтбокса, но не смог

Я плохо объясняю, поэтомувот код 

<html>
<style type="text/css">
.element{
    height: 200px;
    width: 300px;
    background: rgba(255,255,255,0.5);
    z-index: 1;
    border:1px solid black;
    position: relative;
    margin: 0 auto;}
.black{
    position: relative;
    background: rgba(0, 0, 0, 0.6) !important;
    z-index: 200;}
</style>
<body class="black">
<div class="element">Hello,i have to go to the background
    but am not going cos my immediate parent isnt
    letting me,even though my grand dad asked me to!!.. 
</div>
</body>
</html>

Как вы можете c, div не в фоновом режиме, а на переднем плане. Без фона, установленного в div - это можно решить, но сайт, на котором я работаюу него слишком много фонов, от которых невозможно избавиться (поэтому я не могу этого сделать)

Пожалуйста, помогите, Новичок

1 Ответ

0 голосов
/ 21 сентября 2011

Если я понимаю ваш вопрос, вы хотите, чтобы прозрачный оверлей покрывал весь экран под лайтбоксом.

Правильный способ сделать это - создать полноэкранный плавающий div, чтобы покрыть весь экран.CSS будет выглядеть следующим образом. 

.overlay {
    position:absolute;
    top:0;
    left:0;

    width:100%;
    height:100%;

    background: rgba(0, 0, 0, 0.6);
    z-index: 0;
}

Затем добавьте <div class="overlay"></div>

...