使特定的基础元素像在叠加层上方一样表现/渲染

Question

当父级不透明时，如何仅使某些子级元素清晰可见，又不影响页面的渲染性能？

我正在尝试使覆盖下的特定元素做出反应并呈现为好像它们在覆盖上。

• CSS与叠加层混合时，有什么方法可以影响特定底层元素的呈现？还是mix-blend-mode只是自顶向下的方向？ （例如，我想告诉 just .visible与覆盖层进行不同的混合；而下面的所有其余部分都应具有正常的混合）

• filter是否仅在所选元素上工作？当所选元素具有不透明度时，它是否会影响底层元素的渲染？ （例如，使 overlay 覆盖下方的所有内容均为灰度）

而且，由于我认为上述两个问题的答案都对我没有帮助，所以实际的问题是：

• 是否可以在.visible元素上视觉补偿不透明效果

注意：

我知道一种解决方案是使用选择器：

div.data :not(.visible) { opacify: .5; }

而不是使用 overlay ，但是我怀疑尝试将opacify应用于数千的效果如何（尤其是在功能不强大的手机上） .data-子元素将是:not(.visible)。而且也不会阻止对不透明/禁用元素的点击 | 悬停（而我只想单击.visible的区域即可捕获）。

任何出色的解决方案？还是我现在要问的是不可能的？

我试图写一个示例代码段，但找不到解决问题的方法。

Javascript也被接受

当li的数量超过100，并且每个元素都包含100个DOM元素时，优先考虑的是在普通手机上具有良好的视觉/功能效果。

/* structure */
div.data { display: table; }
ul { display: table-row-group; }
li { display: table-row; }
li > div { display: table-cell; }
/* style */
li > div.content { color: red; }
.visible { color: green; border: 1px dashed black; padding: 0 5px; }
/* Overlay */
.data:after {
  content: '';
  position: absolute;
  top: 0; bottom: 0; right: 0; left: 0;
}
/* reduce emphasis */
.data:after {
  background-color: white;
  opacity: .5;
}
/* visual "disabled" effect */
.data:after {
  filter: grayscale(100%);
}

<div class="data">
  <ul>
   <li>
    <div class="content">Foobar1</div>
    <div>
     <span class="content">other content</span>
     <span class="visible">
      Not opaque
      <input type="checkbox" checked />
     </span>
    </div>
   </li>
   <li>
    <div class="content">Foobar2</div>
    <div>
     <span class="content">other content</span>
     <span class="visible">
      Not opaque
      <input type="checkbox" />
     </span>
    </div>
   </li>
  </ul>
</div>