feat: 背景颜色

src/components/Card.vue

@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import { useEditorStore } from '@/stores/editor';
 import { useHoverTiltStore } from '@/stores/hoverTilt';
-import {computed, watchEffect} from 'vue';
+import { computed, watchEffect } from 'vue';
 const store = useEditorStore();
 const tilt_store = useHoverTiltStore();
 
@@ -23,7 +23,8 @@ img {
   <!-- 利用这个元素承载 style 穿透到hover-tilt 内 -->
   <div class="container" :style="borderRadiusStyle">
     <hover-tilt v-bind="tilt_store.tiltProps" class="hover-tilt specular-highlight">
-      <img :src="store.formData.image?.src ?? 'https://images.pokemontcg.io/swsh4/25_hires.png'" :style="store.imageStyle" />
+      <img :src="store.formData.image?.src ?? 'https://images.pokemontcg.io/swsh4/25_hires.png'"
+        :style="store.imageStyle" />
     </hover-tilt>
   </div>
 </template>
@@ -32,13 +33,20 @@ img {
 .container {
   .hover-tilt {
 
-    &::part(tilt),
-    &::part(container) {
+    &::part(tilt) {
       &::before {
         border-radius: var(--border-radius, 0px);
         overflow: hidden;
       }
     }
+
+    &::part(container) {
+      &::before {
+        border-radius: var(--border-radius, 0px);
+        overflow: hidden;
+        background-image: none !important;
+      }
+    }
   }
 }
 </style>