From b9eff625970616bafe7ce71ad3a8d27a60cad8e2 Mon Sep 17 00:00:00 2001
From: bicijinlian <bicijinlian@163.com>
Date: Mon, 24 Apr 2023 00:35:27 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20=E6=99=AE=E9=80=9A=E6=9B=B4=E6=96=B0?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../wwwroot/pages/Utilities/background.html   | 21 +++++++++++++++++++
 1 file changed, 21 insertions(+)

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>