自适应的对话气泡皮肤实现方案

原文链接

在实现评论及回复功能时，考虑可以让大家选择一个皮肤，让评论区域显得不那么单调，具体效果可以参考百度贴吧和QQ的聊天界面。本文给出了一种采用CSS Sprites的实现方式，气泡可以做到宽度和高度的自适应扩展。

本例中用到的气泡图案来自QQ，此处仅用于交流学习。

需求描述

基本要求就是希望可以实现一个类似QQ聊天气泡的效果，做到宽度和高度的自适应扩展。此外，最好可以实现方便的皮肤选择，使得气泡可以应用多种样式，以使界面更丰富多彩。

本文实现样例展示

气泡自适应的宽度和高度

多种皮肤效果展示

实现思路

对于自适应的宽度和高度，普通的行内元素即可实现。为了实现丰富的气泡，不得不使用背景图片，我们首先来观察一个气泡，可以发现一个气泡基本上可以分为9个部分，如下图所示：

为了方便描述，我们对这些区域进行编号为0-8，其中浅蓝色部分（1/3/5/9）为相对固定不变的区域，浅黄色部分（2/4/6/8）为自动扩展的部分（其高度或者宽度需要扩展），浅红色区域（区域0）为显示文本的区域。实际上，这与Android APP开发中常用的9-patch图片的原理是类似的。

为了实现自适应的气泡，我们首先需要对这9个区域进行正确的定位。通过CSS的相对和绝对定位可以达到这个目的。简单来说，区域0的宽度和高度自动扩展，包裹0-8这所有9个区域的元素（假设为wrapper）的宽度和高度也自动扩展，同时wrapper的position设为relative，并把1-8元素的position设为absolute。这样即可以做到宽度和高度的自适应，以及各区域的正确定位。

实现了各区域的定位后，对各区域进行设定背景即可。其中1/3/5/7使用图片作背景，2/4/6/8既可以使用图片，也可以仅使用CSS设定背景和边框颜色（根据实现的难易程度来选择具体实现方式）。为了减少对服务器的图片请求次数，考虑使用CSS Sprites技术。而对于多种皮肤的实现，在不同class下应用不同的样式，调整背景图即可。

关键代码

DOM结构

首先，给出代码结构如下（仅供参考），此处使用className：left和right来区分聊天气泡的位置（界面左侧还是右侧），使用一个className来确定使用的皮肤（以下代码中是bubble-bear），替换该值可选用其他的皮肤。

<ul class="chat-list"><li class="chat-item left"><img src="img/avatar-1.jpg" class="chat-avatar"/><div class="bubble-item bubble-bear"><span class="chat-content">我是萌萌的左边小熊</span><span class="cell cell-1"></span><span class="cell cell-2"></span><span class="cell cell-3"></span><span class="cell cell-4"></span><span class="cell cell-5"></span><span class="cell cell-6"></span><span class="cell cell-7"></span><span class="cell cell-8"></span></div></li><!-- more -->
</ul>

CSS

/* 气泡的position设为relative，方便其子元素的定位 */
.bubble-item {position: relative;
}/* 子元素的position设为absolute，方便其定位到父元素 */
.cell {position: absolute;
}/* 设定背景图（CSS Sprites） */
.bubble-bear .cell-1,
.bubble-bear .cell-3,
.bubble-bear .cell-5,
.bubble-bear .cell-7 {background: url(../img/bubbles.png) no-repeat;
}/* 内容区域，防止被其他区域遮挡 */
.chat-content {position: relative;z-index: 10;
}/*** 以下是小熊左侧的实现代码*//* 区域0（内容区域）的边距及背景颜色等 */
.left .bubble-bear .chat-content {margin: 17px 32px 15px 18px;display: inline-block;background-color: #fff8ef;
}/* 区域1（左上角）的定位、大小设置、背景图位置设置 */
.left .bubble-bear .cell-1 {left: 0;top: 6px;width: 20px;height: 20px;background-position: -3px -10px;
}/* 区域2（上边）的定位、大小设置、背景及边框颜色 */
.left .bubble-bear .cell-2 {left: 20px;top: 11px;right: 20px;height: 16px;background-color: #fff8ef;border-top: 1px solid #835426;
}/* 区域3（右上角）的定位、大小设置、背景图位置设置 */
.left .bubble-bear .cell-3 {right: 0;top: 0;width: 60px;height: 28px;background-position: -58px -4px;
}/* 区域4（右边）的定位、大小设置、背景及边框颜色 */
.left .bubble-bear .cell-4 {top: 28px;right: 6px;bottom: 10px;width: 60px;background-color: #fff8ef;border-right: 1px solid #835426;
}/* 区域5（右下角）的定位、大小设置、背景图位置设置 */
.left .bubble-bear .cell-5 {right: 0;bottom: 0;width: 60px;height: 16px;background-position: -58px -50px;
}/* 区域6（下边）的定位、大小设置、背景及边框颜色 */
.left .bubble-bear .cell-6 {right: 60px;bottom: 6px;left: 20px;height: 10px;background-color: #fff8ef;border-bottom: 1px solid #835426;
}/* 区域7（左下角）的定位、大小设置、背景图位置设置 */
.left .bubble-bear .cell-7 {left: 0;bottom: 0;width: 20px;height: 20px;background-position: -3px -46px;
}/* 区域8（左边）的定位、大小设置、背景及边框颜色 */
.left .bubble-bear .cell-8 {top: 25px;bottom: 20px;left: 4px;width: 20px;background-color: #fff8ef;border-left: 1px solid #835426;
}

另一侧（即右侧）的样式与左侧类似，此处不再详举。其他皮肤的实现方式也与此相同，只是需要根据背景图来调整CSS里各属性的值（主要为定位相关的值top/right/bottom/left，大小相关的值width/height，背景及边框颜色，background-position等）。

完整代码

完整代码见 Github。您还可以在原文的评论区域找到此种实现方案的具体应用。

// www.sfg.name
// sfg1991@163.com
// 2016/9/6