lkddi/chatroom
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

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

Browse Source
This commit is contained in:
流星
2026-02-27 11:05:42 +08:00
parent 53e357418e
commit 0aed0827de
2 changed files with 4 additions and 5 deletions
Download Patch File Download Diff File Expand all files Collapse all files
public/css/chat.css
+2 -1
View File
@@ -390,7 +390,8 @@ a:hover {
height: 36px; height: 36px;
border-radius: 2px; border-radius: 2px;
object-fit: cover; object-fit: cover;
background: #ddd; background: transparent;
mix-blend-mode: multiply;
flex-shrink: 0; flex-shrink: 0;
} }
resources/views/chat/partials/scripts.blade.php
+2 -4
View File
@@ -96,7 +96,7 @@
let botDiv = document.createElement('div'); let botDiv = document.createElement('div');
botDiv.className = 'user-item'; botDiv.className = 'user-item';
botDiv.innerHTML = ` 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> <span class="user-name">AI小班长</span><span style="font-size:12px; margin-left:2px;" title="聊天机器人">🤖</span>
`; `;
botDiv.onclick = () => { botDiv.onclick = () => {
@@ -230,13 +230,11 @@
const senderInfo = onlineUsers[msg.from_user]; const senderInfo = onlineUsers[msg.from_user];
const senderHead = ((senderInfo && senderInfo.headface) || '1.gif').toLowerCase(); const senderHead = ((senderInfo && senderInfo.headface) || '1.gif').toLowerCase();
let headImgSrc = `/images/headface/${senderHead}`; let headImgSrc = `/images/headface/${senderHead}`;
let extraStyle = '';
if (msg.from_user === 'AI小班长') { if (msg.from_user === 'AI小班长') {
headImgSrc = '/images/ai_bot.png'; headImgSrc = '/images/ai_bot.png';
extraStyle = ' mix-blend-mode: multiply;';
} }
const headImg = 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 = ''; let html = '';