点击<a>标签弹出弹窗时背景图片异常发光问题求助

问题定位 #

你碰到的背景图（含边框）异常发光，基本是触发弹窗的<a>标签获取焦点后的默认样式，或者遮罩层的CSS属性（如box-shadow、filter）意外导致的视觉效果。点击<a href="#popup1">后元素处于:focus状态，浏览器默认会给焦点元素添加高亮轮廓，这大概率是发光的源头。

具体解决步骤 #

• 移除焦点元素的默认高亮
  给触发弹窗的<a>标签添加:focus样式，禁用浏览器默认的焦点轮廓：

a[href="#popup1"]:focus {
  outline: none;
}

如果是自定义阴影导致，检查遮罩层的CSS，比如是否误加了类似box-shadow: 0 0 15px rgba(255,255,255,0.8)的发光样式，直接移除或调整参数即可。

• 检查遮罩层的CSS属性
  查看弹窗遮罩元素的样式，是否设置了filter（如blur配合半透明背景可能产生类似发光的视觉效果），或者border与background的组合导致边框发光。可以尝试重置相关属性：

.popup-overlay {
  box-shadow: none;
  filter: none;
}

• 优化焦点管理（可选）
  弹窗打开后，将焦点转移到弹窗内部的可交互元素（如关闭按钮），既避免触发元素持续保持焦点，也提升页面可访问性：

// 假设弹窗的关闭按钮类名为.close-btn
document.querySelector('#popup1').addEventListener('open', function() {
  this.querySelector('.close-btn').focus();
});

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