如何使整个页面变暗？（HTML）

Question

如何使整个页面变暗？（HTML）

javascripthtml

7

当我使用另一个div时，它不会影响其他dom类，所以当我想让整个页面变暗时，我必须修改每个dom类。

有没有一种方法可以用灰色透明面积覆盖整个文档？

- Sahkan

1

http://stackoverflow.com/questions/18065927/button-to-darken-the-whole-page - Tharif

3个回答

4

你需要展示一个叠加的层

。

<div id="overlay"></div>

使其位置固定

#overlay {
  background-color: rgba(0,0,0,0.5);
  position:fixed;
  left:0;
  top: 0;
  width:100%;
  height:100%;
}

并使其在您想要变暗页面时可见，以下是实现方法：

在此处介绍如何做到这一点。

$(function(){
  //Am hiding the overlay after 2 sec
  $("#overlay").delay(3000).hide(200);
})

 #overlay {
      background-color: rgba(0,0,0,0.5);
      position:fixed;
      left:0;
      top: 0;
      width:100%;
      height:100%;
    }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<body>
  <div id="overlay"></div>
  <h1>My Awesome Page</h1>
</body>

- Saqueib

2

您可以使用CSS为您的body添加背景颜色：background-color。

#overlay {
    background-color: rgba(0,0,0,0.5); /* your color */
    width: 100%;
    height: 100%;
    position: fixed;
    top: 0;
    left: 0;
}

演示：http://jsfiddle.net/6gahqaej/2

- Radonirina Maminiaina

1

谢谢，问题是当我把整个页面变暗时，我需要显示一个正常不透明度的弹出窗口。变暗的页面是为了表明用户应该只关注弹出的窗口。 - Sahkan

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- George Netu · Accepted Answer

这里有一个CodePen，展示了您的需求（创建可关闭的弹出窗口并调暗视图）。

HTML：

<div class="wrapper">
  <button class="btn btn-success dim">Dim the page!</button>
  <div class="dimmer">
    <span class="exit">&times;</span>
  </div>
  <div class="content">
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Harum vel itaque fuga fugit fugiat enim excepturi nihil aperiam soluta ex nemo quam consectetur blanditiis dolores quisquam temporibus voluptatem veritatis distinctio neque labore ullam dicta delectus aspernatur odio ipsam. Sit est tempora odit neque fuga sapiente velit aliquid dignissimos ratione perspiciatis animi ullam incidunt veritatis quo eligendi esse aperiam qui vitae praesentium nam! Necessitatibus sequi maiores facere non numquam nesciunt veniam dignissimos aperiam consectetur saepe excepturi mollitia id tempora vero labore ducimus impedit iusto perspiciatis aliquam optio distinctio debitis quibusdam nulla dicta repellat praesentium ullam cupiditate totam soluta voluptatibus blanditiis recusandae!</p>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Harum vel itaque fuga fugit fugiat enim excepturi nihil aperiam soluta ex nemo quam consectetur blanditiis dolores quisquam temporibus voluptatem veritatis distinctio neque labore ullam dicta delectus aspernatur odio ipsam. Sit est tempora odit neque fuga sapiente velit aliquid dignissimos ratione perspiciatis animi ullam incidunt veritatis quo eligendi esse aperiam qui vitae praesentium nam! Necessitatibus sequi maiores facere non numquam nesciunt veniam dignissimos aperiam consectetur saepe excepturi mollitia id tempora vero labore ducimus impedit iusto perspiciatis aliquam optio distinctio debitis quibusdam nulla dicta repellat praesentium ullam cupiditate totam soluta voluptatibus blanditiis recusandae!</p>
  </div>
</div>

CSS：

.wrapper {
  padding: 2.5em;
  margin: 0 auto;
  width: 80%;
}

.dimmer {
  display: none;
    background: #000;
    opacity: 0.5;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 100;
}

.dim {
  display: block;
  margin: 2em auto;
  z-index: 200;
}

.exit {
  font-size: 100px;
  color: red;
  position: absolute;
  top: 2px;
  left: 2px;
  opacity: 1;
  cursor: pointer;
}

Javascript:

$(function() {
  var dimmerButton = $('.dim');
  var dimmer = $('.dimmer');
  var exit = $('.exit');
  dimmerButton.on('click', function() {
    dimmer.show();
  });
  exit.on('click', function() {
    dimmer.hide();
  });
});

注意：这篇文章的作者是@srikarg。