Как затемнить нижнюю часть элемента?

Я хочу показать элемент div, имеющий z-index 1050. Поэтому я хочу создать темноту для всех элементов под ней; что-то вроде картинки:Как затемнить нижнюю часть элемента?

Вот div элемент Я хочу, чтобы показать:

<div data-role="dialog" id="dlg" data-close-button="true" data-windows-style="true" data-overlay="true" data-overlay-color="op-dark" style="position: fixed;float: left;z-index: 1050;left: 0px;right: 0px;top: 310px;box-shadow: 0px 0px 5px 0px;"> 
    <div class="container"> 
     <h2><?php echo _getText('global.dialog.titre.conf'); ?></h2> 
     <p> 
      <span id="dlg_msg"></span><span class="place-right"><button id="dlg_oui" class="button default" style="margin-right: 5px;"><?php echo _getText('global.oui'); ?></button><button id="dlg_non" class="button default"><?php echo _getText('global.non'); ?></button></span> 
     </p> 
    </div> 
</div>

Так как сделать темноту, когда div показывает?

источник

2015-09-17 pheromix

Ну, в принципе вы могли бы сделать это, имея DIV занимает всю страницу, с меньшим г-индексом, чем тот, который вы хотите показать выше, и дать ему черный цвета с 'opacity: 0', и когда ваш div должен показать, измените непрозрачность другого div на 0,5, например. Или у вас есть скрытый div, который занимает всю страницу и показывает его только тогда, когда отображается ваш «верхний» div. – chiapa

используйте наложение с z-index: 1049 и полупрозрачный фон –

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

Очень хорошее объяснение с вариациями, как добиться того, что дано здесь: http://tympanus.net/codrops/2013/11/07/css-overlay-techniques/

В принципе, у вас есть DIV:

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

И вы даете ему фон, который является несколькими прозрачным и имеет темный цвет, может быть, только черный. Кроме того, убедитесь, что она охватывает всю страницу:

.overlay{ 
     position: absolute; 
     top: 0; 
     left: 0; 
     width: 100%; 
     height: 100%; 
     z-index: 10; 
     background-color: rgba(0,0,0,0.5); /*dim the background*/ 
    }

источник

2015-09-17 10:09:43 jasper

Пожалуйста, включите соответствующие части кода и не просто добавьте ссылку. – caramba

«фиксированный» метод является лучшим среди других предлагаемых методов: – pheromix

Мое личное предпочтение было бы создать полупрозрачное наложение изображения (PNG/GIF). Так, например, создайте 5x5 пикселей GIF/PNG с сплошным цветом черного. Затем дайте ему прозрачность 50%.

Затем используйте что-то вроде этого CSS класса ...

.hidescreen 
    { 
     position:fixed; 
     display:block; 
     left:0; 
     top:0; 
     width:100%; 
     height:100%; 
     z-index:499; 
     background: url('./Images/translucent-background.png') repeat; /* This ensures the translucent background works in IE. */ 
    }

Я предпочитаю этот метод, как это работает в почти всех браузерах, в том числе старых IE.

источник

2015-09-17 10:07:54 Dom

хороший ответ .... –

Меня это интересует подход. Итак, прежде чем этот спрятан? Тогда, когда доступно оповещение, вы можете установить его на видимое? – guradio

Очень ванильный способ сделать это просто добавить его как div. Скажите ...

, а затем используйте jQuery для добавления класса. $ ("# Оверлей") addClass ("hidescreen."). – Dom

Один вариант, надев свой модальный вместо просто дать ему массивный box-shadow.

Поскольку это не увеличивает размер элемента, он не вызывает переполнения.

.modal { 
 
    position: absolute; 
 
    top: 50%; 
 
    left: 0; 
 
    width: 100%; 
 
    text-align: center; 
 
    background: lightblue; 
 
    box-shadow: 0 0 9999px 9999px rgba(0, 0, 0, 0.5); 
 
}

<div class="content">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Rem dolore veritatis sint totam, unde repellendus tenetur ratione consectetur soluta nihil nobis nulla fugiat molestiae deserunt accusantium vitae eaque temporibus, aliquid quis. Aut hic itaque 
 
    iste eligendi ipsa</div> 
 

 
<div class="modal"> 
 
    <h1>Top of the World, Ma! Top of the World</h1> 
 
</div>

источник

2015-09-17 10:14:39

Как затемнить нижнюю часть элемента?

ответ

Смежные вопросы