处理浅色背景上的浅色文本的引导方法？答案

【问题标题】：Bootstrap way of handling light text on light background?处理浅色背景上的浅色文本的引导方法？
【发布时间】：2021-06-11 18:51:43
【问题描述】：

在（可能）浅色背景上（例如，在图像上，图像的内容通常未知，但很容易变成白色或非常浅色）上的浅色文本的适当方法是什么？

Here 是一些效果的示例：

请注意，重要的是，即使在纯白色背景上，这些词仍然（仅）可以阅读。

我试图用 bootstrap 4 来模拟这个，用这个：

<span class="text-light shadow-lg">
My text
<span>

但这似乎不起作用 - 我无法让效果出现。

既然这是一个常见的问题，我希望 bootstrap 有一种明智的方式来处理这个问题？

【问题讨论】：

【解决方案1】：

bootstrap 不提供文本阴影样式。您可以使用text-light 并自定义您的阴影。

/* just for demo */
body {
  padding: 10px;
}

span {
 text-shadow: #000 1px 1px 5px;
}

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/css/bootstrap.min.css" rel="stylesheet"/>
<span class="text-light">text</span>

【讨论】：