CSS聚焦背景覆盖问题：实现带透明度白色高亮并保留原背景

问题说明 #

需要为元素添加聚焦状态的高亮效果，但当前CSS实现会覆盖元素原有背景。已知限制：

• 无法增删页面元素，仅能通过添加CSS类实现效果
• 元素原有背景类型不确定（可能是纯色、渐变、背景图等）
  现有代码在聚焦时会将背景替换为低透明度白色，且opacity会影响整个元素（包括文字），不符合“保留原背景+叠加高亮”的需求。

解决方案 #

核心思路是不替换原有背景属性，而是通过叠加层实现高亮效果，以下两种方法均满足需求：

方法1：多层背景叠加

利用CSS支持多层背景的特性，在聚焦时为元素添加一层半透明白色渐变背景，原背景会自动作为底层保留。若需要更自然的叠加效果，可搭配background-blend-mode：

b {
  background-color: red;
  font-size: 42px;
}

.app-focus:focus {
  /* 叠加半透明白色渐变 */
  background-image: linear-gradient(rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0.1));
  /* 可选：让叠加层与原背景混合，效果更自然 */
  background-blend-mode: overlay;
}

方法2：内部阴影模拟高亮

使用inset类型的超大范围盒阴影，相当于在元素内部填充一层半透明色，完全不会影响原背景的显示，兼容性极佳：

b {
  background-color: red;
  font-size: 42px;
}

.app-focus:focus {
  /* 内部阴影覆盖整个元素区域，实现半透明高亮 */
  box-shadow: inset 0 0 0 9999px rgba(255, 255, 255, 0.1);
}

为什么原有方案不生效？ #

• background-color: white会直接覆盖元素原有的background属性，无论原背景是颜色还是图片都会被替换
• opacity: 0.1作用于整个元素，包括文字内容，导致文字也会变得透明，不符合需求

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