h1是否具有邊框圖像和動態寬度？

我試圖使用動態創建這個帶狀效果的h1：h1是否具有邊框圖像和動態寬度？

enter image description here

我有這兩個圖像：

enter image description here

，我的目標是要堅持這些在我的h1標記的每一端，使用display: inline;屬性添加動態wi嗞。有沒有什麼「正確的方法」來做到這一點，並使其跨瀏覽器工作？

對於我的測試目的，色帶末端高40px，寬18px。我不知道我會怎麼處理這個影子，但是如果你們能幫我弄清楚如何讓這個工作起作用，我可以讓它看起來不錯。（希望）

爲了清楚的目的，這裏是（非工作）的CSS我迄今爲止：

h1 { 
display: inline; 
height: 40px; 
background-image: url(images/ribbon/left.png), url(images/ribbon/right.png); 
background-position: left, right; 
padding: 0 18x; 
background-color: #ECECEC; 
}

CSS的上面使#ECECEC顏色滲出的帶的端部後面。有任何想法嗎？

更新： 如果有幫助，這裏是我目前的css給我帶來的一個屏幕截圖。這是一個有點令人sens目結舌，使結果更容易看到。我添加了紅色背景而不是#ECECEC。

enter image description here

來源

2012-11-27 drewwyatt

這是一個粗略的解決方案，只是爲了弄清楚如何

–

http://jsfiddle.net/RENjx/56/ – Iamowrange

首先嚐試

overflow: hidden

它也可能是一個瀏覽器的問題： Border Radius = Background Bleed

編輯：你有沒有想過不使用圖像一起，只用純CSS http://css-tricks.com/snippets/css/ribbon/

可能看起來不像你想要的，但與CSS混亂將解決這個問題。

來源

2012-11-27 23:31:53 joshuahornby10

那並不看起來好像在工作。出血看起來是來自背景圖像剛剛坐在背景顏色的頂部（並有一個透明的部分）。我需要他們坐在背景顏色（或類似的東西）之外 – drewwyatt

看看我的更新 - 這可能會有所幫助。 – drewwyatt

剛剛編輯我的帖子。 – joshuahornby10

h1是否具有邊框圖像和動態寬度？

回答

相關問題