我目前所使用的wordpress主题的右上方有一个黑色的气泡，里面显示的是我的博客描述。我发现，当博客描述很短时，气泡也会变短，反之，当描述文字比较长时，气泡也会随之变长，总之，在这些描述性的文字背后，气泡总能以恰当的长度作为文字的背景显示出来。那么，如何实现这样的效果呢？

首先，我们把博客描述看做是一个独立的元素，我们实际上要做的只是用CSS对这个元素进行样式化。以下是调用博客描述的php语句：

<?php bloginfo(‘description’); ?>

为了要把博客描述变成我们想要的样子，我们给这个语句加上DIV标签，那么它就变为：

<div id=”bubble”><?php bloginfo(‘description’); ?></div>

1.添加背景图片

对“bubble”进行样式化，首先给它添加背景图片，也就是我们所看到下面的黑色气泡图片，（这个图片需要你事先做好备用）：

#bubble{
                  background:url(images/bubble_right.gif)  no-repeat  right;
}

这个图片我们只需要它出现一次，因此我们需要加上no-repeat属性，之所以要将图片设定为从右边开始显示，是因为之后要使图片具有弹性效果，也就是说文字有多长，图片就有多长。添加上这样的CSS属性后刷新浏览器，你会发现原先的博客描述文字不见了，取而代之的是一个黑色气泡图片，而且看起来很不完整，如下图：

这是因为文字本身是黑色的，图片也是黑色的，所以就看不到文字了，图片不完整是因为文字的高度小于图片的高度，所以只能看到图片的一部分，要想显示完整的图片，我们需要给bubble设置一个高度。

2.设置高度并定位

#bubble{
                  background:url(images/bubble_right.gif)  no-repeat  right;
                  height:28px;
                  position:absolute;
                  top:40px;
                  right:0;
}
如果只是设置好高度，那么你将会看到完整的气泡图片。另外，我们希望这个气泡出现在页面的右上角，所以需要对bubble进行绝对定位，我们将其设定在距其父元素上部40像素，右部0像素的地方，但是经过绝对定位之后，你会发现位置都对了，但是图片又不完整了，变成了下面的样子，这是因为文字的长度限定了图片的长度。

其实这正是我们所需要的结果，因为如果让整个图片都显示出来的话，它将会比文字要长，那样的就不美观了。但是这样显然很不美观，所以，我们需要给图片左边加上一部分，使它看上去很完整。另外，我们还需要对文字进行样式化，起码要把它变成黑色背景下能够看到的颜色才行。

3.完善图片并样式化文字

这一步，我们需要给文字添加上<p>代码，以便选定它进行样式化。那么，博客描述的php代码将变为：

<div id=”bubble”><p><?php bloginfo(‘description’); ?></p></div>

对#bubble p进行样式化，首先我们事先需要准备一个图片，像这样：

然后将它添加到文字的左边，设置为从左上开始显示。同时，我们把文字设置为白色，大小为12个像素，调整位置，那么CSS语句写下来应该是：

#bubble p {
                       font-size:12px;
                       color:#fff;
                       height:28px;
                       padding:4px 12px 0 10px;
                       background:url(images/bubble_left.gif) no-repeat top left;
}

需要注意的是，由于我们调整了文字的位置，所以如果仅仅从左边开始显示图片的话，将会出现两张图片拼凑不到一起的情况。另外，还需要给bubble p设定高度，使得图片能很好的显示。

完成之后，效果看起来应当和我的博客右上角的气泡是一样的，并且是具有弹性的，随着博客描述长短的变化，图片的长度也会随之变化，当然，这是有一定限度的，最长不能超出bubble的背景图片长度，你可以改变博客描述文字试一试。