框架的多個背景圖像

我試圖使用多個背景圖像以獲得在液體寬度DIV這個結果：框架的多個背景圖像

enter image description here

我在三個部分分割圖像：

enter image description here

和我想要的樣式像這樣的DIV：

 height: 14px; 
     background-image: url(static/img/workspace-pre-hr-l.gif), 
      url(static/img/workspace-pre-hr-bg.gif), 
      url(static/img/workspace-pre-hr-r.gif); 
     background-repeat: no-repeat, repeat-x, no-repeat; 
     background-position: left, center, right;

但右邊距不工作，所以我有這個：

任何幫助嗎？謝謝

編輯小提琴！ http://jsfiddle.net/J5Tsa/

已解決 看起來像這是一個z-index問題的圖像。聲明前右頁邊距重複一個解決了這個問題。

來源

2012-10-22 pistacchio

一個http://jsfiddle.net/的任何機會呢？ –

'workspace-pre-hr-bg.gif'是否設定了寬度？如果您的div不是固定寬度，您需要考慮這一點。 –

艾倫：那就是我重複 – pistacchio

這是我的理解是圖像根據它們在background-image屬性指定的順序堆疊。所以我的理論是，workspace-pre-hr-r.gif正在顯示下方workspace-pre-hr-bg.gif。

嘗試......

background-image: url(static/img/workspace-pre-hr-l.gif), 
    url(static/img/workspace-pre-hr-r.gif), 
    url(static/img/workspace-pre-hr-bg.gif); 
background-repeat: no-repeat, no-repeat, repeat-x; 
background-position: left, right, center;

來源

2012-10-22 16:28:58 jessegavin

等待一個小提琴，我可以建議你使用中心圖像只，圍捕邊界的東西，如：

border-radius: 10px 10px 0px 0px;

編輯：作爲一個音符，邊界半徑出生繞過Sliding Doors技術...

來源

2012-10-22 15:20:38

CSS 3支持border-image規則，如果您願意放棄與早期CSS版本和用戶代理的兼容性，該規則可以實現您想要的功能。語法看起來更爲簡潔，更易於閱讀：

<div style="border-width: 25px; border-image: url(http://codebrief.com/old/uploads/2011/11/aqua_bg.png) 25 25 25 25 repeat; background-color: #00e0a0; background-clip: padding-box;">Hello World!</div>

我寫在http://jsfiddle.net/Wnq3z/

我只是用Google搜索保存它，並找到了解決辦法，我信用http://codebrief.com/2011/11/two-game-changing-css-3-features/回顧我讀到一些關於這個存在於後CSS 3

來源

2012-10-22 15:59:52 amn

這是最佳的解決方案，謝謝，但多個BG的圖像，而很新也，有瀏覽器之間的更好的支持。 – pistacchio

框架的多個背景圖像

回答

相關問題