可扩展的宽度H2与BG

Question

我正在尝试使用3个图像（左，重复和右）作为“语音气泡”标题的bg，但不能让中间重复以填充容器div。

这就是它（灰色泡泡'hello'）http://www.dev.inside-guides.co.uk/brentwood/pages/index.html

这是CSS：

.right-nav .speech-left {float:left;background:url(/images/speech-left.png) no-repeat;width:55px;height:47px;}
.right-nav h2.speech-repeat {display:block;float:left;background:url(/images/speech-repeat.png) repeat-x;height:47px;}
.right-nav .speech-right  {float:left;background:url(/images/speech-right.png) no-repeat;width:10px;height:47px;}

和html：

<div class="bg clearfix" style="width:100%;">
<div class="speech-left"></div>
<h2 class="speech-repeat">hello</h2>
<div class="speech-right"></div>
</div>

任何帮助都非常感激。

Answer 1

您可能还需要浮动中间元素：

.right-nav h2.speech-repeat {
    background: url(/images/speech-repeat.png) repeat-x;
    height: 47px;
    float: left;
}

Answer 2

我建议以不同的方式分割你的图像。然而它确实有效，因为你的左图包含底部气泡的粘性位，气泡的中间部分开始直到左边部分完全结束。

您可以使用边距来偏移中间部分以使文本显示在左侧图像的顶部，但是我倾向于以与九个补丁相同的方式进行操作。

使用这种结构显然会使用更多图像，但可以产生更好的效果，因为您可以最终调整垂直和水平尺寸，以适应任意数量的文本。

也只是因为他们使用了9段并不意味着你不能使用更多。沿着底部使用更多部分将允许您使粘性位保持相同的比例，同时周围的底部部分将扩展以填充它们所需的区域。