UI: 将 mix-blend-mode 应用到所有用户的头像，解决白底问题

public/css/chat.css

@@ -390,7 +390,8 @@ a:hover {
     height: 36px;
     border-radius: 2px;
     object-fit: cover;
-    background: #ddd;
+    background: transparent;
+    mix-blend-mode: multiply;
     flex-shrink: 0;
 }
 

resources/views/chat/partials/scripts.blade.php

@@ -96,7 +96,7 @@
             let botDiv = document.createElement('div');
             botDiv.className = 'user-item';
             botDiv.innerHTML = `
-                <img class="user-head" src="/images/ai_bot.png" style="mix-blend-mode: multiply;" onerror="this.src='/images/headface/1.gif'">
+                <img class="user-head" src="/images/ai_bot.png" onerror="this.src='/images/headface/1.gif'">
                 <span class="user-name">AI小班长</span><span style="font-size:12px; margin-left:2px;" title="聊天机器人">🤖</span>
             `;
             botDiv.onclick = () => {
@@ -230,13 +230,11 @@
         const senderInfo = onlineUsers[msg.from_user];
         const senderHead = ((senderInfo && senderInfo.headface) || '1.gif').toLowerCase();
         let headImgSrc = `/images/headface/${senderHead}`;
-        let extraStyle = '';
         if (msg.from_user === 'AI小班长') {
             headImgSrc = '/images/ai_bot.png';
-            extraStyle = ' mix-blend-mode: multiply;';
         }
         const headImg =
-            `<img src="${headImgSrc}" style="display:inline;width:16px;height:16px;vertical-align:middle;margin-right:2px;${extraStyle}" onerror="this.src='/images/headface/1.gif'">`;
+            `<img src="${headImgSrc}" style="display:inline;width:16px;height:16px;vertical-align:middle;margin-right:2px;mix-blend-mode: multiply;" onerror="this.src='/images/headface/1.gif'">`;
 
         let html = '';