聊天对话框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;