0

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

这是它的位置（带有“你好”的灰色气泡）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>

非常感谢任何帮助。

4

2 回答 2

0

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

.right-nav h2.speech-repeat {
    background: url(/images/speech-repeat.png) repeat-x;
    height: 47px;
    float: left;
}
于 2012-07-27T10:49:37.830 回答
0

我建议以不同的方式分割你的图像。它目前确实有效，但是由于您的左侧图像包括底部气泡上的粘性位，因此气泡的中间部分无法开始，直到左侧部分完全完成。

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

在此处输入图像描述

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

也仅仅因为他们使用 9 段并不意味着你不能使用更多。在底部使用更多可以让你让粘性钻头保持相同的比例，而周围的底部部件会膨胀以填充它们需要的区域。

于 2012-07-27T11:42:39.000 回答