使用CSS+JavaScript或纯js实现半透明遮罩效果的实例分享-前端开发

我来为您详细讲解使用CSS+JavaScript或纯js实现半透明遮罩效果的实例分享的完整攻略。

我来为您详细讲解使用CSS+JavaScript或纯js实现半透明遮罩效果的实例分享的完整攻略。

一、使用CSS实现半透明遮罩效果

CSS中实现半透明黑色遮罩的方法如下：

.overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.5);
}

通过position: fixed设置元素的定位方式为相对于视口固定，然后利用top、left、right、bottom属性将元素的宽度和高度设置为全屏。同时，通过background属性设置遮罩的颜色和不透明度。这里设置的rgba值中a代表透明度，取值范围为0~1，0为完全透明，1为完全不透明。例如background: rgba(0, 0, 0, 0.5)表示黑色遮罩不透明度为0.5。

下面是一个实现半透明黑色遮罩效果的示例：

<div class="container">
  <div class="overlay"></div>
  <div class="content">
    <h1>我是内容</h1>
    <p>这里是一些内容。。。</p>
  </div>
</div>

.container {
  position: relative;
  height: 300px;
}

.overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.5);
}

.content {
  position: relative;
  z-index: 1;
  text-align: center;
  color: #fff;
  margin-top: 50px;
}

二、使用JavaScript实现半透明遮罩效果

除了使用CSS实现半透明遮罩效果之外，还可以使用JavaScript来实现。常用的方法是动态创建一个半透明黑色遮罩的div元素，并将其插入到页面上。

<div class="container">
  <div class="content">
    <h1>我是内容</h1>
    <p>这里是一些内容。。。</p>
    <button id="show-overlay">显示遮罩</button>
  </div>
</div>

.container {
  position: relative;
  height: 300px;
}

.overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.5);
  display: none;
}

.content {
  position: relative;
  z-index: 1;
  text-align: center;
  color: #fff;
  margin-top: 50px;
}

var showOverlayBtn = document.getElementById('show-overlay');
var overlay = document.createElement('div');
overlay.className = 'overlay';

showOverlayBtn.onclick = function() {
  document.body.appendChild(overlay);
  overlay.style.display = 'block';
}

在这个示例中，我们首先获取了一个按钮元素，并将其绑定了一个点击事件。当点击按钮时，我们使用createElement方法创建了一个div元素，并将其ClassName设置为overlay。然后，我们将其添加到页面中，并将其显示。

三、纯JS实现半透明遮罩效果

除了使用CSS和JavaScript的组合来实现半透明遮罩效果之外，还可以使用纯JavaScript来实现。这个方法比较原始，但是也可以实现相同的效果。

<div class="container">
  <div class="content">
    <h1>我是内容</h1>
    <p>这里是一些内容。。。</p>
    <button id="show-overlay">显示遮罩</button>
  </div>
</div>

.container {
  position: relative;
  height: 300px;
}

.content {
  position: relative;
  z-index: 1;
  text-align: center;
  color: #fff;
  margin-top: 50px;
}

.overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0, 0, 0, 0.5);
  display: none;
}

var showOverlayBtn = document.getElementById('show-overlay');
var overlay = document.createElement('div');
overlay.className = 'overlay';

showOverlayBtn.onclick = function () {
  document.body.appendChild(overlay);
  overlay.style.display = 'block';

  window.onscroll = function () {
    var scrollTop = document.documentElement.scrollTop || document.body.scrollTop;
    overlay.style.top = -scrollTop + 'px';
  }
};