透明度工具

透明度级别

<div class="opacity-100">完全不透明</div>
<div class="opacity-75">略微透明</div>
<div class="opacity-50">半透明</div>
<div class="opacity-25">高度透明</div>
<div class="opacity-0">完全透明（不可见但占据空间）</div>

实际应用

<!-- 禁用状态 -->
<button class="btn btn-secondary opacity-50">加载中...</button>

<!-- 水印效果 -->
<div class="position-relative">
    <div class="position-absolute top-50 start-50 translate-middle opacity-25 fs-1 text-secondary">
        水印文字
    </div>
    <div class="p-5">实际内容区域</div>
</div>

<!-- 悬浮高亮效果 -->
<style>
    .hover-opacity { transition: opacity .2s; }
    .hover-opacity:hover { opacity: 1 !important; }
</style>
<img src="/placeholder/200x150?seed=opacity" class="opacity-75 hover-opacity" alt="悬浮变亮">

与背景透明度区别

.opacity-* 控制整个元素（包括所有子元素）的透明度，而 .bg-opacity-* 仅控制背景色的透明度：

<!-- 整个元素半透明（文字也会变淡） -->
<div class="opacity-50 bg-primary text-white p-3">
    整个元素半透明
</div>

<!-- 仅背景半透明（文字保持清晰） -->
<div class="bg-primary bg-opacity-50 text-dark p-3">
    仅背景半透明
</div>