实现前端头像覆盖层

views/user/info.php

@@ -72,7 +72,12 @@ $darkMode = Yii::$app->user->identity->dark_mode;
         <h1><?= Html::encode($this->title) ?></h1>
 
         <div class="user-profile">
-            <?= $model->getGravatar(email: $model->email, s: 100, img: true, atts: ['alt' => 'User Avatar', 'style' => 'border-radius: 50%']) ?>
+            <div class="avatar-container">
+                <?= $model->getGravatar(email: $model->email, s: 100, img: true, atts: ['alt' => 'User Avatar', 'class' => 'avatar']) ?>
+                <div class="avatar-overlay">
+                    <i class="fa-solid fa-pen-to-square"></i>
+                </div>
+            </div>
             <div class="user-details">
                 <div class="user-info">
                     <p id="p-username"><?= Html::encode($model->username) ?></p>
@@ -163,8 +168,7 @@ $darkMode = Yii::$app->user->identity->dark_mode;
                                             <span class="legend-color" style="background-color: rgb(196,134,0);"></span>
                                             <span>保险箱已用空间</span>
                                             <span style="margin-left: auto;"><?= $vaultUsedSpace_F ?>
-<!--                                            PENDING-->
+                                                <?= Html::a('<i class="fa-solid fa-arrow-up-right-from-square" style="font-size: 0.75rem;"></i>', ['site/index']) ?>
-                                            <?= Html::a('<i class="fa-solid fa-arrow-up-right-from-square" style="font-size: 0.75rem;"></i>', ['site/index']) ?>
                                         </span>
                                         </div>
                                     </div>

web/css/user-info.css

@@ -6,6 +6,40 @@
     margin-bottom: 30px;
 }
 
+.avatar-container {
+    position: relative;
+}
+
+.avatar {
+    width: 100%;
+    height: 100%;
+    border-radius: 50%;
+}
+
+.avatar-overlay {
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    background: rgba(0, 0, 0, 0.125);
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    opacity: 0;
+    transition: opacity 0.3s ease;
+    border-radius: 50%;
+}
+
+.avatar-overlay i {
+    color: white;
+    font-size: 2em;
+}
+
+.avatar-container:hover .avatar-overlay {
+    opacity: 1;
+}
+
 .user-details {
     display: flex;
     justify-content: space-between;