聊天对话框css+雪碧图

聊天对话框html结构

<div class="chat-item-wrapper"> <div class="avatar-wrapper"> <img src="avatar.png" alt=""> </div> <div class="chat-wrapper"> <div class="chat-container">对话内容对话内容<div class="avatar"></div></div> </div> </div>

 

css

.chat-item-wrapper { display: flex; } .chat-item-wrapper .avatar-wrapper { height: 32px; } .chat-item-wrapper .avatar-wrapper img { flex: none; width: 32px; height: 32px; border-radius: 50%; } .chat-wrapper .chat-container { margin: 0; color: #fff; background-color: #0099ff; border-radius: 20px; padding: 5px 12px; line-height: 1.4rem; margin-left: 15px; width: fit-content; } .avatar{ display: inline-block; vertical-align: middle; margin-left: 4px; }

 

 

 

 

 

PS 如果需要使用雪碧图

CSS 雪碧图应用原理：

只有一张大的合并图， 每个小图标节点如何显示单独的小图标呢？ 其实就是 截取 大图一部分显示，而这部分就是一个小图标。

示例：

background-image: url("sprite.png"); background-position: -60px 0px; width:48px; height:48px;