如何通过CSS优化Bootstrap工具提示（Tooltip）的背景透明度？-css教程-PHP中文网

tooltip背景透明度需改.tooltip-inner的background-color为rgba()并加!important，同时同步调整各方向箭头伪元素的border-color为对应rgba值；深色模式下应优先重定义--bs-tooltip-bg变量。

如何通过css优化bootstrap工具提示（tooltip）的背景透明度？

Tooltip背景透明度必须改`background-color`，不是`opacity`

Bootstrap的.tooltip默认用background-color: #000（纯黑），opacity会连带文字、箭头一起变淡，根本不是“背景透明”。真正起效的是把background-color改成rgba()——比如rgba(0, 0, 0, 0.8)。别漏掉!important，因为Bootstrap 5+的tooltip样式权重很高，不加它大概率被覆盖。

直接覆盖`.tooltip-inner`，别碰`.tooltip`容器

.tooltip本身只是定位容器，真渲染背景的是子元素.tooltip-inner。改错地方就白忙活：

VPS Bootstrap

从零启动全新 VPS，完成 OpenClaw 完整部署，包括备份/恢复及恢复后验证。用于 OpenClaw 部署。

下载

✅ 正确：写.tooltip-inner { background-color: rgba(0, 0, 0, 0.7) !important; }
❌ 错误：只改.tooltip { background-color: ... }——它没背景色，改了也没用
⚠️ 注意：.tooltip-inner还自带border-radius和padding，改透明度时别意外覆盖这些

箭头颜色也要同步调，否则边缘发灰

Tooltip箭头（::before伪元素）默认是纯黑border-color，和半透背景拼在一起会显得生硬：

箭头颜色必须用rgba()匹配背景，比如.tooltip.bs-tooltip-top .tooltip-inner::before { border-top-color: rgba(0, 0, 0, 0.7); }
方向不同，伪元素名也不同：bs-tooltip-bottom对应::before的border-bottom-color，bs-tooltip-left对应border-left-color
漏掉箭头调整，用户第一眼看到的就是不协调的深色边线

深色模式下`--bs-tooltip-bg`变量优先级更高

Bootstrap 5.3+引入CSS变量控制tooltip背景，--bs-tooltip-bg默认值是#000，不带alpha。如果项目用了深色模式切换或自定义主题，光靠background-color覆盖可能失效：

更稳妥的方式是重定义变量：:root { --bs-tooltip-bg: rgba(0, 0, 0, 0.75); }
变量必须放在Bootstrap主CSS之后加载，否则会被覆盖
检查开发者工具的Computed面板，确认background-color最终来源是不是var(--bs-tooltip-bg)——如果是，变量法才是唯一解

真正生效的关键不在alpha值大小，而在于你是否同时控制了.tooltip-inner和它的箭头伪元素；变量方式虽干净，但加载顺序错一拍，整个tooltip就退回纯黑。