如何让div下方元素可见？实现鼠标跟随的隐藏文本效果

你之前的思路误区在于：backdrop-filter: opacity(100%)无法恢复文本自身的低透明度——opacity()滤镜是调整背景内容的透明度值，而非提升已半透明元素的可见度。下面提供两种可行的实现方案：

方案一：颜色匹配+反转滤镜（推荐） #

将文本颜色设置为与页面背景色完全一致，通过圆形的invert()滤镜反转颜色，让圆形区域内的文本显现。

完整代码 #

<!DOCTYPE html>
<html>
<head>
  <style>
    body {
      background-color: #ffffff;
      margin: 0;
      padding: 2rem;
    }

    .hidden-content {
      color: #ffffff; /* 与背景色一致，隐藏文本 */
      font-size: 1.5rem;
      line-height: 2;
      max-width: 800px;
    }

    #circle {
      position: absolute;
      transform: translate(-50%, -50%);
      height: 80px;
      width: 80px;
      border-radius: 50%;
      box-shadow: 0 0 40px 10px rgba(0, 0, 0, 0.15);
      pointer-events: none;
      backdrop-filter: invert(100%); /* 反转下方颜色，让文本显现 */
      z-index: 100;
    }
  </style>
</head>
<body>
  <div class="hidden-content">
    这是一段隐藏的文本，只有当鼠标圆形光标移过时才能看见。你可以在这里添加任意多的内容，测试跟随效果。
  </div>
  <div id="circle"></div>

  <script>
    let circle = document.getElementById('circle');

    const onMouseMove = (e) => {
        circle.style.left = e.pageX + 'px';
        circle.style.top = e.pageY + 'px';
    }
    
    document.addEventListener('mousemove', onMouseMove);
  </script>
</body>
</html>

方案二：低透明度文本+增强对比度滤镜 #

如果偏好使用低透明度的文本，可通过brightness()和contrast()滤镜增强圆形区域内文本的可见度：

关键CSS调整 #

.hidden-content {
  color: #000000;
  opacity: 0.05; /* 极低透明度隐藏文本 */
  font-size: 1.5rem;
  line-height: 2;
}

#circle {
  /* 其他属性不变 */
  backdrop-filter: brightness(20) contrast(10); /* 增强亮度和对比度，显现文本 */
}

为什么之前的尝试失败？ #

backdrop-filter: opacity(100%)不会改变文本自身的opacity属性——它仅控制背景内容的透明度渲染逻辑，无法将已半透明的文本恢复为完全可见状态。上述两种方案都是通过修改文本的显示逻辑（颜色匹配/对比度增强），结合backdrop-filter实现预期效果。

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