如何使元素的底部变暗？

Question

我想要显示一个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时如何制造黑暗？

Answer 1

假设您尝试过预先搜索此内容但找不到它：您应该搜索的术语是模态，这是一种浏览器内弹出窗口，通常伴随着褪色背景

这里给出了一个非常好的解释，包括如何实现这一点： 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*/
    }

Answer 2

我个人的偏好是创建一个半透明叠加图像（PNG / GIF）。例如，创建一个5x5像素的GIF / PNG，其纯色为黑色。然后给它50％的透明度。

然后使用类似CSS Class的东西......

.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。

Answer 3

将模式放在适当位置的一个选择就是给它一个巨大的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>