如何更改背景颜色的不透明度——BG-INFO Opacity设置

嘿，我来帮你搞定这个背景透明度的问题！

你遇到的情况其实很常见：Bootstrap的bg-info类是用实色十六进制值定义的，直接用opacity属性的话，会让整个<a>元素（包括里面的文字）都变透明，这肯定不是你想要的效果。

给你两个靠谱的解决方案，看你用的Bootstrap版本来选：

方案1：用Bootstrap 5+内置的透明度工具类（最方便） #

如果你用的是Bootstrap 5或更高版本，框架已经自带了背景透明度的工具类，直接和bg-info搭配使用就行：

<a class="p-2 mb-2 bg-info bg-opacity-50 text-white">你的链接内容</a>

bg-opacity-50会给背景色添加50%的透明度，而且只会影响背景，文字还是保持原来的不透明度，完美匹配你的需求～

方案2：自定义CSS类（兼容旧版本Bootstrap） #

如果你的项目用的是Bootstrap 4或更早版本，没有内置的透明度工具类，那就自己写个自定义CSS类：

/* 自定义半透明的info背景类 */
.bg-info-transparent {
  background-color: rgba(23, 162, 184, 0.5) !important;
  /* 这里的RGBA值对应bg-info的原色，最后一位0.5就是50%透明度 */
}

然后把HTML里的类换成这个自定义类：

<a class="p-2 mb-2 bg-info-transparent text-white">你的链接内容</a>

加!important是为了确保这个样式能覆盖Bootstrap默认的bg-info样式，如果你的自定义CSS是在Bootstrap样式之后加载的，也可以不用加，但加上更稳妥。

⚠️ 千万别直接给元素加opacity: 0.5！那样会让链接里的文字也变得半透明，完全达不到你要的效果哦～

内容的提问来源于stack exchange，提问作者LJS