使用CSS和JavaScript实现半透明遮罩效果的实例分享

在这篇文章中，我们将介绍如何使用CSS和JavaScript（或纯JavaScript）来实现一个半透明遮罩效果。这种效果通常用于在网页上创建一个覆盖层，以突出显示某个元素或创建模态框等交互元素。

HTML 结构

首先，我们需要一个 HTML 结构来放置要添加遮罩效果的内容。这个结构可以是一个简单的 <div> 元素，如下所示：

<div class="container">
  <!-- 需要添加遮罩的内容 -->