应使用 rgba() 或 hsla() 设置半透明背景色，避免 opacity 影响子元素；Bootstrap 5 可结合 CSS 变量如 rgb(var(--bs-primary-rgb), 0.7) 实现主题自适应；禁用 background-image 模拟，优先采用简洁 rgba() 写法。
直接用 rgba() 设置背景色，别用 opacity
bootstrap 本身不提供“半透明背景色”的专用类，opacity 会影响整个元素及其子内容（文字、图标也会变透明），这不是你想要的。真正要的是背景层半透明，而文字保持清晰——必须用 rgba() 或 hsla() 颜色值。
比如想让一个 <div> 背景是 Bootstrap 的 primary 蓝但带 70% 不透明度（即 30% 透明）：
<pre class="brush:php;toolbar:false;"><div class="p-4" style="background-color: rgba(13, 110, 253, 0.7);">
文字不会变淡，只有背景透
</div></pre>
<ul>
<li>
<code>rgba(13, 110, 253, 0.7) 对应 Bootstrap 5 的 $primary 默认值，第四个参数是 alpha（0=全透明，1=不透明）
rgba($primary, 0.7)，避免硬编码 RGB 值style="background-color: #0d6efd; opacity: 0.7;"——这会让里面所有文字也变模糊用 Bootstrap 5 的颜色工具类 + 自定义 CSS 变量
Bootstrap 5 支持 CSS 自定义变量（如 --bs-primary-rgb），可以结合 rgb() 动态生成半透明背景：
<div class="p-4" style="background-color: rgb(var(--bs-primary-rgb), 0.7);"> 利用内置变量，更易维护 </div>
- 这个写法依赖 Bootstrap 5+ 的 CSS 变量注入机制，Bootstrap 4 不支持
var(--bs-primary-rgb) -
rgb(var(--bs-primary-rgb), 0.7)是合法语法，浏览器会把var()展开为13, 110, 253，再拼成rgb(13, 110, 253, 0.7) - 如果项目用了深色模式，
--bs-primary-rgb会随主题自动切换，比写死 RGB 更健壮
避免用 background-image 模拟半透明背景
有人尝试用 linear-gradient() 或 url("data:image/svg+xml,...") 伪造半透明效果，这纯属绕路：
- SVG base64 背景在 IE11 中可能解析失败，且增加体积
-
background-image: linear-gradient(rgba(13,110,253,0.7), rgba(13,110,253,0.7));和直接background-color效果一样，但多一层渲染开销 - 当需要 hover 变色或响应式调整时，
background-color+rgba()更容易用 CSS 类或 JS 控制
注意 border 和 rounded 类对视觉的影响
半透明背景一旦叠加在非纯白/纯灰容器上，边缘是否带边框、是否圆角，会显著影响“通透感”：
- 加
border类（如border border-light）可能让半透明区域显得割裂，建议优先靠 padding 和父容器背景衬托 - 用
rounded-2或rounded-pill会让半透明色块更柔和，但若父容器有阴影（shadow-sm），需测试层级是否遮挡 - 移动端 Safari 对
rgba()渲染完全没问题，但极旧安卓 WebView（4.x）不支持，不过这类设备基本已退出主流支持范围
style="background-color: rgba(13, 110, 253, 0.7);"，或者 Sass 里写 background-color: rgba($primary, 0.7);。其他花招要么多余，要么埋兼容性雷。
