如何使用CSS创建半透明遮罩并通过类控制实现按钮高亮效果

完全可以通过原生CSS实现需求，以下是可直接复用的实现方案，所有控制逻辑都封装在自定义类中，直接作用于遮罩层即可切换效果。

1. 基础遮罩层样式 #

默认是全局0.5透明度的半透明黑色遮罩：

.overlay {
  position: fixed;
  inset: 0;
  background: #000;
  opacity: 0.5;
  z-index: 999;
  display: none;
}
/* 控制遮罩显示的基础类 */
.overlay.show {
  display: block;
}

2. 高亮效果控制类 #

直接给遮罩层添加该类即可生成指定区域的高亮挖空效果，这里用CSS变量实现动态适配不同高亮位置：

.overlay.overlay--highlight {
  /* 取消全局透明度，避免高亮区域也被半透明处理 */
  opacity: 1;
  background: rgba(0, 0, 0, 0.5);
  /* 通过mask属性实现挖空效果 */
  mask: linear-gradient(#000, #000) content-box, 
        linear-gradient(#000, #000);
  mask-composite: exclude;
  mask-repeat: no-repeat;
  /* CSS变量定义高亮区域的偏移量，可通过JS动态修改 */
  padding: var(--highlight-top, 0) var(--highlight-right, 0) var(--highlight-bottom, 0) var(--highlight-left, 0);
  mask-size: calc(100% - var(--highlight-left, 0) - var(--highlight-right, 0)) calc(100% - var(--highlight-top, 0) - var(--highlight-bottom, 0));
}

3. 动态修改高亮区域（可选） #

如果需要高亮页面上的指定元素，通过JS获取元素坐标后赋值给CSS变量即可：

const highlightTarget = document.querySelector('#要高亮的元素选择器')
const overlay = document.querySelector('.overlay')
const targetRect = highlightTarget.getBoundingClientRect()

// 赋值高亮区域坐标
overlay.style.setProperty('--highlight-top', `${targetRect.top}px`)
overlay.style.setProperty('--highlight-right', `${window.innerWidth - targetRect.right}px`)
overlay.style.setProperty('--highlight-bottom', `${window.innerHeight - targetRect.bottom}px`)
overlay.style.setProperty('--highlight-left', `${targetRect.left}px`)

// 展示带高亮效果的遮罩
overlay.classList.add('show', 'overlay--highlight')

使用说明 #

• 仅展示普通半透明遮罩：给遮罩层加show类即可
• 展示带高亮的遮罩：给遮罩层同时加show和overlay--highlight类即可
• 不需要额外修改DOM结构，所有效果切换仅通过类名控制

内容的提问来源于stack exchange，提问作者C0mpl3x