diff --git a/BlazorStudy.Bootstrap5Study/wwwroot/pages/Utilities/background.html b/BlazorStudy.Bootstrap5Study/wwwroot/pages/Utilities/background.html
index 645bfa5..7e329eb 100644
--- a/BlazorStudy.Bootstrap5Study/wwwroot/pages/Utilities/background.html
+++ b/BlazorStudy.Bootstrap5Study/wwwroot/pages/Utilities/background.html
@@ -88,6 +88,27 @@
                 您的自定义 CSS 中需要渐变吗？只需添加 background-image: var(--bs-gradient);
             </div>
         </div>
+
+         <div class="card mt-3">
+            <div class="card-header .bg-secondary-subtle">
+                不透明度：从 v5.1.0 开始，实用程序使用 CSS 变量通过 Sass 生成。这允许实时颜色更改，而无需编译和动态 Alpha 透明度更改
+            </div>
+            <div class="card-body">
+                <h3>附加样式：style="--bs-bg-opacity: .5;"</h3>
+                <div class="bg-success p-2 text-white">这是默认的成功背景</div>
+                <div class="bg-success p-2" style="--bs-bg-opacity: .5;">这是50%不透明度的成功背景, 附加样式：style="--bs-bg-opacity: .5;"</div>
+
+                <h3>使用样式类：.bg-opacity-75 .bg-opacity-50 .bg-opacity-25 .bg-opacity-10</h3>
+                <div class="bg-success p-2 text-white">默认成功背景</div>
+                <div class="bg-success p-2 text-white bg-opacity-75">75% 不透明度的成功背景 bg-opacity-75</div>
+                <div class="bg-success p-2 text-dark bg-opacity-50">50% 不透明度的成功背景 bg-opacity-50</div>
+                <div class="bg-success p-2 text-dark bg-opacity-25">25% 不透明度的成功背景 bg-opacity-25</div>
+                <div class="bg-success p-2 text-dark bg-opacity-10">10% 不透明度的成功背景 bg-opacity-10</div>
+            </div>
+            <div class="card-footer text-warning">
+                注意：v5.1.0 新增
+            </div>
+        </div>
     </div>
 
     <script src="jquery/jquery-3.6.4.min.js"></script>