我如何使整個頁面變暗？（html）

Question

當我使用其他div來做它時，它不會影響其他dom類，所以當我希望整個頁面變暗時，我必須修改每個dom類。

有沒有辦法將整個文檔與灰色透明平面重疊？

Answer 1

有一個codepen ilustrating您的需求。 （創建一個可忽略的彈出窗口並使視圖變暗）

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

Answer 2

您需要顯示疊加div

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

Answer 3

您可以使用css為您的身體添加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

我如何使整個頁面變暗？（html）

問題描述

3 個解決方案

解決方案1
5 已采納 2015-05-11 06:43:08

解決方案2
3 2015-05-11 06:42:12

解決方案3
2 2015-05-11 06:38:14

我如何使整個頁面變暗？ （html）

問題描述

3 個解決方案

解決方案1 5 已采納 2015-05-11 06:43:08

解決方案2 3 2015-05-11 06:42:12

解決方案3 2 2015-05-11 06:38:14

我如何使整個頁面變暗？（html）

解決方案1
5 已采納 2015-05-11 06:43:08

解決方案2
3 2015-05-11 06:42:12

解決方案3
2 2015-05-11 06:38:14