HTML选择性变暗问题：避免子菜单变暗的方案及其他调暗方法

核心问题原因 #

直接给<html>元素设置opacity会让所有子元素继承这个透明度，包括你的子菜单，所以才会出现菜单也变暗的情况。同时pointer-events: none还会导致菜单无法被点击，这也是问题之一。

解决方案：添加独立遮罩层 #

最合理的做法是新增一个全屏遮罩层，放在页面内容上方、子菜单下方，通过控制遮罩层的显示/隐藏来实现页面变暗，同时不影响子菜单的正常显示和交互。

修改后的完整代码 #

HTML

<div class="info">
  <a id="USERINFO">My Account</a>
</div>
<!-- 新增遮罩层 -->
<div id="pageOverlay" class="overlay"></div>
<div id="login-subMenu">
  <button id="closeButton">Close X</button>
</div>

CSS

#login-subMenu {
  position: fixed;
  top: 0;
  right: -400px;
  width: 400px;
  height: 100%;
  background-color: #fff;
  z-index: 9999; /* 确保菜单在遮罩层上方 */
  transition: all 0.3s ease-out;
}

/* 遮罩层样式 */
.overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5); /* 半透明黑色实现变暗 */
  opacity: 0;
  pointer-events: none; /* 默认不拦截点击 */
  transition: opacity 0.3s ease-out;
  z-index: 9998; /* 遮罩层在菜单下方 */
}

/* 遮罩层激活状态 */
.overlay.active {
  opacity: 1;
  pointer-events: auto; /* 激活后拦截点击，点击遮罩可关闭菜单 */
}

JavaScript

const USERINFO = document.getElementById("USERINFO");
const subMenu = document.getElementById("login-subMenu");
const pageOverlay = document.getElementById("pageOverlay");
const closeButton = document.getElementById("closeButton");

// 打开菜单
USERINFO.addEventListener("click", function() {
  subMenu.style.right = "0";
  pageOverlay.classList.add("active");
});

// 点击遮罩或关闭按钮关闭菜单
function closeMenu() {
  subMenu.style.right = "-400px";
  pageOverlay.classList.remove("active");
}

pageOverlay.addEventListener("click", closeMenu);
closeButton.addEventListener("click", closeMenu);

// 点击菜单内部不触发关闭逻辑
subMenu.addEventListener("click", function(event) {
  event.stopPropagation();
});

其他页面变暗的实现方法 #

• 使用filter: brightness()：给页面内容容器（而非<html>/<body>）添加filter: brightness(0.5)，需确保子菜单不在该容器内，避免被一同变暗。
• background-color结合mix-blend-mode：给遮罩层设置background-color: #000和mix-blend-mode: multiply，通过调整遮罩层的opacity控制变暗程度，能保留页面原有色彩层次感。
• backdrop-filter: brightness()：如果需要让遮罩层下方内容同时有模糊+变暗效果，可使用backdrop-filter: brightness(0.7) blur(5px)，注意该属性对旧浏览器兼容性稍差。

内容的提问来源于stack exchange，提问作者Thor The dog