div背景半透明，覆盖整个可视区域的遮罩层效果

要实现div背景半透明，覆盖整个可视区域的遮罩层效果，可以按照以下步骤进行：

第一步：创建遮罩层div

创建一个遮罩层的div，它的样式可以设置如下：

.selector {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.5);
  z-index: 9999;
}

以上代码中：

position: fixed; 表示该div拥有固定位置，不会随着页面滚动而改变位置。
top: 0; left: 0; width: 100%; height: 100%; 表示该div位置为页面左上角，宽度和高度都为100%，覆盖整个可视区域。
background: rgba(0, 0, 0, 0.5); 表示遮罩层的背景为黑色，透明度为0.5，实现背景半透明的效果。
z-index: 9999; 表示该div的z轴值比其他元素都高，处于最上层。

第二步：将遮罩层div添加到body中

使用JavaScript或jQuery将遮罩层div添加到body中，代码示例：

var body = document.getElementsByTagName('body')[0];
var maskDiv = document.createElement('div');
maskDiv.setAttribute('class', 'selector');
body.appendChild(maskDiv);

或者使用jQuery的写法：

$('body').append('<div class="selector"></div>');

示例1：点击按钮出现遮罩层

<!DOCTYPE html>
<html>
  <head>
    <style type="text/css">
      .selector {
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: rgba(0, 0, 0, 0.5);
        z-index: 9999;
      }
    </style>
    <script type="text/javascript">
      function showMask() {
        $('body').append('<div class="selector"></div>');
      }
      function hideMask() {
        $('.selector').remove();
      }
    </script>
  </head>
  <body>
    <button onclick="showMask()">点击显示遮罩层</button>
    <button onclick="hideMask()">点击隐藏遮罩层</button>
  </body>
</html>

以上代码中，点击“点击显示遮罩层”按钮，就会添加遮罩层div到body中，点击“点击隐藏遮罩层”按钮，就会将遮罩层div删除。

示例2：页面加载时自动出现遮罩层

<!DOCTYPE html>
<html>
  <head>
    <style type="text/css">
      .selector {
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: rgba(0, 0, 0, 0.5);
        z-index: 9999;
      }
    </style>
    <script type="text/javascript">
      $(document).ready(function() {
        $('body').append('<div class="selector"></div>');
      });
    </script>
  </head>
  <body>
    <h1>这是一个示例页面</h1>
    <p>页面内容</p>
  </body>
</html>

以上代码中，使用jQuery的$(document).ready()方法，在页面加载完成后自动将遮罩层div添加到body中。

本站文章如无特殊说明，均为本站原创，如若转载，请注明出处：div背景半透明，覆盖整个可视区域的遮罩层效果 - Python技术站

div背景半透明，覆盖整个可视区域的遮罩层效果

第一步：创建遮罩层div

第二步：将遮罩层div添加到body中

示例1：点击按钮出现遮罩层

示例2：页面加载时自动出现遮罩层

相关文章