bootstrap 不支持文字透明度响应式控制，因 opacity 类全局生效且破坏可访问性；应使用 rgba() 颜色配合媒体查询按断点调整，并校验对比度。
Bootstrap 本身不提供“文字透明度随屏幕尺寸变化”的现成工具类，opacity 是全局 CSS 属性，无法通过 Bootstrap 的响应式断点类（如 col-md-6）直接控制。想实现文字在不同视口下显示不同透明度，必须手写响应式 CSS 规则，且不能依赖 opacity 简单叠加——它会让文字发虚、可访问性暴跌，应优先用 color 的 alpha 通道控制。
为什么不能用 opacity-* 类控制文字透明度
Bootstrap 5 默认只保留 opacity-0 和 opacity-100，中间值（如 opacity-50）根本不存在；即使你手动扩展了 opacity-25 等类，它也作用于整个元素及其子树——文字、图标、链接都会同步变淡，对比度崩坏，尤其在移动端阳光直射下几乎不可读。WCAG 明确要求文本与背景对比度 ≥ 4.5:1，opacity 会无差别削弱所有内容，不是可控的“文字透明”。
正确做法：用 rgba() color 配合媒体查询
真正可控的方式是把文字颜色本身设为带 alpha 的 rgba()，再用 CSS 媒体查询按断点切换数值。这样只影响文字色，不影响背景、边框或子元素，且能精确校验对比度。
- 基础写法：
.text-responsive { color: rgba(0, 0, 0, 0.8); } - 小屏（
xs）加深：@media (max-width: 575.98px) { .text-responsive { color: rgba(0, 0, 0, 0.95); } } - 大屏（
lg）降低饱和度：@media (min-width: 992px) { .text-responsive { color: rgba(0, 0, 0, 0.6); } } - 深色模式下需额外适配：
@media (prefers-color-scheme: dark) { .text-responsive { color: rgba(255, 255, 255, 0.85); } }
慎用 backdrop-filter 或 text-shadow 模拟“半透文字”
有人试图用 backdrop-filter: blur(1px) 加透明背景制造文字“玻璃感”，但这是错觉——文字本身没变，只是背景模糊导致视觉弱化，实际 color 值仍是 100% 不透明，且 backdrop-filter 在 Android WebView 和旧 Safari 中失效率高；text-shadow: 0 0 4px rgba(0,0,0,0.2) 虽能加柔边，但会扩大文字渲染区域，在小字号下糊成一团，且无法替代真正的对比度控制。
和 Bootstrap 组件配合时的坑
若文字在 .alert、.card-title 或 .navbar-brand 内，直接覆盖 color 可能被组件内联样式或更高权重规则压制：
- 必须加
!important，例如：color: rgba(0, 0, 0, 0.7) !important; - 选择器要足够具体，比如
.navbar-light .navbar-brand.text-responsive，避免被.navbar-light .navbar-brand原始规则覆盖 - Bootstrap 的
$body-color变量默认是纯黑/纯白，改它会影响全局，不推荐；应只针对特定类局部覆盖
真正难的是对比度校验——同一段 rgba(0,0,0,0.6) 在白色背景上可能达标，在浅灰图片上就不及格，得用 WebAIM Contrast Checker 实时测，不能凭感觉写数字。
