feat: 磨砂玻璃效果

src/views/demo/cssDemo.vue

@@ -1,6 +1,9 @@
 <template>
-    <base-container>
-        <el-card header="单个子元素和多个子元素显示不同样式,单个子元素没有margin背景黄色,多个子元素有margin背景红色">
+    <div class="p-5 space-y-5 !bg-gray-100">
+        <el-card
+            class="mb-5"
+            header="单个子元素和多个子元素显示不同样式,单个子元素没有margin背景黄色,多个子元素有margin背景红色"
+        >
             <div class="father">
                 <div class="child1">单个子元素</div>
             </div>
@@ -12,12 +15,24 @@
             </div>
         </el-card>
 
-        <el-card header="border渐变实现">
+        <el-card
+            class="mb-5"
+            header="border渐变实现"
+        >
             <div class="input-box">
                 <div class="input" />
             </div>
         </el-card>
-    </base-container>
+
+        <el-card
+            class="mb-5"
+            header="磨砂玻璃效果"
+        >
+            <div class="blurred-glass-box">
+                <div class="modal flex justify-center items-center"><h1>磨砂玻璃上的内容</h1></div>
+            </div>
+        </el-card>
+    </div>
 </template>
 
 <style lang="scss" scoped>
@@ -59,4 +74,24 @@
         linear-gradient(45deg, #f6855c, #e29cf9, #5cacfe) border-box;
     padding-left: 5px;
 }
+
+.blurred-glass-box {
+    width: 100%;
+    height: 300px;
+    background: url('/src/views/demo/tuiImageEditor/img/test.jpg') no-repeat center center;
+    background-size: cover;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+
+    & > .modal {
+        width: 300px;
+        height: 200px;
+        background: rgba($color: #fff, $alpha: 0.4);
+        backdrop-filter: blur(10px);
+        border-radius: 10px;
+        overflow: hidden;
+        color: #f00;
+    }
+}
 </style>