文字看不清是因Bootstrap默认样式仅适配深色背景，浅色图上白字缺乏对比；应改用线性渐变遮罩、添加文字阴影、垂直居中定位，并使用响应式字体和系统感知颜色确保各场景可读。
用 .carousel-caption 叠加文字时，为什么字看不清？
默认的 .carousel-caption 会把文字放在图片底部，用白色字体 + 半透明黑底，但一旦背景图本身是浅色（比如天空、白墙、产品图），白色文字就直接“融”进去了——这不是你 css 写错了，是对比度崩了。
根本原因是：Bootstrap 的默认样式只假设你用深色背景图。它没做动态适配，也不会根据图片明暗自动切换文字颜色。
- 别指望靠
color: black硬改——在深图上立刻看不见 - 别删掉
.bg-dark或rgba(0,0,0,.5)背景层——没它，浅图上文字更糊 - 移动端缩放后，文字大小和遮罩厚度可能失衡，导致边缘发虚或文字“漂浮”
怎么让文字在任意背景图上都清晰？
核心就两条：加足够强的视觉锚点 + 控制文字自身可读性边界。
- 保留
.carousel-caption的结构，但重写它的background：用linear-gradient(rgba(0,0,0,.7), rgba(0,0,0,.7))替代默认的rgba()块，避免渐变过渡区吃掉文字边缘 - 文字强制用高对比组合：
color: #fff+text-shadow: 0 2px 4px rgba(0,0,0,.6)，阴影不是装饰，是保底手段 - 禁用默认的
bottom: 0，改用top: 50%+transform: translateY(-50%)实现垂直居中——否则不同图高度下文字位置飘忽，可读区域不固定
响应式场景下文字突然变小或错位？检查这三点
轮播图在手机上文字挤成一团、在平板上又太小，往往不是字体设错了，而是单位和容器没对齐。
- 别用
px写font-size，改用rem或vw：font-size: clamp(1.25rem, 4vw, 2.5rem)是安全选择 -
.carousel-caption的父容器.carousel-item必须有明确高度（比如min-height: 50vh），否则在图片加载完成前，文字会塌陷到顶部 - 如果用了
img-fluid，确保图片本身带height: auto，否则object-fit: cover可能裁掉文字区域
深色模式或高对比度系统下文字消失？
Windows 高对比主题或 macOS 的“增加对比度”开启后，系统会强制覆盖所有文本颜色为纯白/纯黑，而 Bootstrap 默认的 text-white 在黑底上直接隐身。
- 必须用系统感知的色值：
color: CanvasText（而不是#fff）或color: HighlightText - 在
:root或组件级加媒体查询：@media (forced-colors: active) { .carousel-caption p { color: CanvasText; } } - 避免给文字加
background，高对比模式下它会被忽略，只剩文字裸奔
text-shadow 失效。上线前务必在真机上用几张典型图（白底产品图、灰调风景、深色夜景）快速过一遍。 
