diff --git a/BlazorStudy.Bootstrap5Study/wwwroot/index.html b/BlazorStudy.Bootstrap5Study/wwwroot/index.html
index 1523b94..78f1eaf 100644
--- a/BlazorStudy.Bootstrap5Study/wwwroot/index.html
+++ b/BlazorStudy.Bootstrap5Study/wwwroot/index.html
@@ -29,6 +29,14 @@
                 <a target="_blank" href="pages/layouts/layout_1.html">布局页</a>
             </div>
         </div>
+        <div class="card mt-3">
+            <div class="card-header bg-secondary-subtle">
+                辅助菜单
+            </div>
+            <div class="card-body">
+                <a target="_blank" href="pages/Helpers/颜色与背景.html">颜色与背景</a>
+            </div>
+        </div>
     </div>
     <script src="jquery/jquery-3.6.4.min.js"></script>
     <script src="bootstrap/js/bootstrap.bundle.min.js"></script>
diff --git a/BlazorStudy.Bootstrap5Study/wwwroot/pages/Helpers/颜色与背景.html b/BlazorStudy.Bootstrap5Study/wwwroot/pages/Helpers/颜色与背景.html
new file mode 100644
index 0000000..e909aa7
--- /dev/null
+++ b/BlazorStudy.Bootstrap5Study/wwwroot/pages/Helpers/颜色与背景.html
@@ -0,0 +1,65 @@
+﻿<!DOCTYPE html>
+<html>
+<head>
+    <meta charset="utf-8" />
+    <title>颜色与背景</title>
+    <base href="/" />
+    <link rel="icon" type="image/png" href="favicon.png" />
+    <link rel="stylesheet" href="bootstrap/css/bootstrap.min.css" />
+    <link rel="stylesheet" href="css/app.css" />
+    <script src="/plugs/holder/holder.min.js"></script>
+</head>
+<body>
+    <div class="container">
+        <div class="card mt-3">
+            <div class="card-header .bg-dark-subtle">
+                颜色与背景：设置具有对比前景色的背景色
+            </div>
+            <div class="card-body">
+                <div class="text-bg-primary p-3">Primary 具有对比色的主色 .text-bg-primary</div>
+                    <div class="text-bg-secondary p-3">具有对比色的次色 .text-bg-secondary</div>
+                    <div class="text-bg-success p-3">具有对比色的成功色 .text-bg-success</div>
+                    <div class="text-bg-danger p-3">具有对比色的危险色 .text-bg-danger</div>
+                    <div class="text-bg-warning p-3">具有对比色的警告色 .text-bg-warning</div>
+                    <div class="text-bg-info p-3">具有对比色的信息色 .text-bg-info</div>
+                    <div class="text-bg-light p-3">具有对比色的㳀色 .text-bg-light</div>
+                    <div class="text-bg-dark p-3">具有对比色的深色 .text-bg-dark</div>
+            </div>
+            <div class="card-footer text-warning">
+                v5.2 中新增
+            </div>
+        </div>
+        <div class="card mt-3">
+            <div class="card-header .bg-dark-subtle">
+                在组件和样式类中使用：比如 徽章等, 使用样式类： .text-* .bg-*
+            </div>
+            <div class="card-body">
+                <h2>badge中使用</h2>
+                <span class="badge text-bg-primary">Primary</span>
+                <span class="badge text-bg-info">Info</span>
+
+                <h2 class="mt-3">card 中使用</h2>
+                <div class="card text-bg-primary mb-3" style="max-width: 18rem;">
+                    <div class="card-header">头部</div>
+                    <div class="card-body">
+                        <p class="card-text">一些快速的示例文本，以卡片标题为基础，构成卡片的大部分内容。使用 .card-text 新式类</p>
+                    </div>
+                </div>
+                <div class="card text-bg-info mb-3" style="max-width: 18rem;">
+                    <div class="card-header">头部</div>
+                    <div class="card-body">
+                        <p class="card-text">整个卡片div中使用样式类 .text-bg-info</p>
+                    </div>
+                </div>
+            </div>
+            <div class="card-footer text-warning">
+                v5.2 中新增
+            </div>
+        </div>
+    </div>
+
+    <script src="jquery/jquery-3.6.4.min.js"></script>
+    <script src="bootstrap/js/bootstrap.bundle.min.js"></script>
+    <script src="js/app.js"></script>
+</body>
+</html>
\ No newline at end of file
