如何让文本在任意背景色下近乎不可见？

下面是几种可直接应用在div或span标签上的解决方案，适配未知背景（包括随浏览器明暗模式变化的场景）：

方案1：针对明暗模式直接设置文本色 #

如果背景色跟随系统亮/暗模式切换（亮模式白、暗模式黑），直接用媒体查询定义接近背景的文本色：

.barely-visible {
  /* 亮模式：接近白色的浅灰，与白背景对比度极低 */
  color: #f2f2f2;
}

@media (prefers-color-scheme: dark) {
  .barely-visible {
    /* 暗模式：接近黑色的深灰，与黑背景对比度极低 */
    color: #181818;
  }
}

使用方式：

<div style="background-color: unknown_beforehand">
  <div class="barely-visible">barely visible text</div>
</div>

方案2：用CSS变量动态适配任意背景 #

如果背景色通过CSS变量定义（比如--bg），可以通过调整亮度生成匹配的文本色：

/* 定义背景色变量，亮暗模式自动切换 */
:root {
  --bg: #ffffff;
  --text-brightness: 90%; /* 比亮背景暗10% */
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg: #000000;
    --text-brightness: 10%; /* 比暗背景亮10% */
  }
}

.barely-visible {
  color: hsl(0, 0%, var(--text-brightness));
}

如果背景色是动态生成的，还可以用JS获取背景色的亮度值，再更新--text-brightness变量，适配任意背景。

方案3：混合模式自动适配未知背景 #

完全不需要提前知道背景色，用混合模式让文本自动融合到背景中：

.barely-visible {
  color: #777;
  mix-blend-mode: soft-light;
  opacity: 0.25;
}

这种方法的优势是不管背景是什么颜色（纯色、渐变甚至图片），文本都会自动呈现低对比度的“几乎看不见”效果。

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