CSS靈活的裝飾性的圖片兩邊

Question

我試圖做一個裝飾標題與水平線兩側標題，類似於http://www.impressivewebs.com/centered-heading-horizontal-line/，但有以下限制：

• 支持任意標題文本
• 液 - 拉伸以適合頁面的寬度
• 水平線條是圖像 - 每條線都是由一個裝飾性的「尖端」圖像組成，然後是一個重複部分，它應該根據需要伸展以填充頁面寬度
• decorat提示圖像爲固定寬度（每張297像素）
• 解決方案必須在網頁上使用背景圖像
• 隨着頁面寬度縮小，圖像的重複部分變小並最終消失。如有必要，中間的標題文本將包裝到多行中。

我想只使用CSS的解決方案，雖然我會考慮JavaScript的幫助，如果它不能用純CSS完成。

我已經看到過幾個類似的問題，但我不認爲任何解決方案都能完成我期待的任務。

這是我自己天真的嘗試（也在http://jsfiddle.net/39qLr/1/）。爲了簡單起見，我用紅色將「尖端」圖像着色，並將柔性重複圖像用黃色着色。顯而易見的問題是，黃色部分現在沒有出現！

HTML：

<div class="heading-container"> 
    <div class="left-tip"></div> 
    <div class="left-filler"></div> 
    <h1>Heading Text</h1> 
    <div class="right-filler"></div> 
    <div class="right-tip"></div> 
</div> 

CSS：

.heading-container { 
    display: table; 
    width: 100%; 
} 

.left-tip, .right-tip { 
    background-color: red; 
    width: 297px; 
    display: table-cell; 
} 

.left-filler, .right-filler { 
    background-color: yellow; 
    display: table-cell; 
} 

h1 { 
    text-align: center; 
    display: table-cell; 
} 

我任何指導，非常感謝！

Answer 1

與同事的幫助下，我們已經成功地得到，因爲我們認爲這是儘可能接近：

http://jsfiddle.net/rbCvq/

HTML（同前）：

<div class="heading-container"> 
    <div class="cell left-tip">&nbsp;</div> 
    <div class="cell left-filler">&nbsp;</div> 
    <h1 class="cell heading-text">Heading Text</h1> 
    <div class="cell right-filler">&nbsp;</div> 
    <div class="cell right-tip">&nbsp;</div> 
</div> 

CSS ：

.heading-container { 
    display: table; 
    width: 100%; 
} 

.cell 
{ 
    display: table-cell; 
} 

.left-tip, .right-tip { 
    width: 297px; 
    background: red; 
} 

.left-filler, .right-filler { 
    background: yellow; 
} 

.heading-text { 
    width: 1px; 
    white-space: nowrap; 
} 

的祕密武器，使得它的工作似乎是：

• 的標題元素
• 加入white-space: nowrap
• 在空的DIV

當然，這並未在nbsp;上1px的寬度並不符合我原來的標準，將文本打包成多行，但我認爲整體效果和我們所希望的一樣。此外，DIV上的標記有點沉重，沒有語義的目的。

謝謝你的所有建議，我希望這有助於別人有一天！

Answer 2

我認爲你正在尋找的東西接近這個：

http://jsfiddle.net/39qLr/2/

我把你的圖片裏面填充物，這樣就可以相對中利用位置aboslute。這將把它們聯繫到一起。

擺弄你的寬度讓它看起來正確，並且介意高度。

<div class="right-filler"> 
     <div class="right-tip"></div> 
</div> 

.left-tip, .right-tip { 
    background-color: red; 
    width: 297px; 
    height:50px; 
    position:absolute; 
} 
.left-tip{ 
    left:0; 
} 
.right-tip{ 
    right:0; 
}