帶BG的可擴展寬度H2

Question

我正在嘗試使用3張圖片（左，重復和右）作為“語音泡沫”標題的背景，但無法使中間重復以填充容器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個細分，並不意味着您不能使用更多細分。 在底部使用更多，可以使粘性位保持相同的比例，而周圍的底部將擴展以填充所需的區域。