2011-09-21 92 views
1

我使用html5並試圖創建一個粗糙的邊緣無縫邊框(頂部,側面+底部)。css背景圖像不是無縫的

我知道ie8不支持CSS3邊框圖像。 IE8已經回到了我們願意迎合的時間。

所以我使用3格的背景圖像顯示,唯一的問題是取決於內容的長度,底部背景圖像沒有很好地對齊,並使框出現無縫,由於重複的中間圖像在邊界合併之前切斷。

我用Photoshop中的畫筆創建鋸齒狀的容器。我對此有一個鼻子,但找不到合適的解決方案。

+0

你可能包括一些示例代碼供我們查看,也許使用[jsFiddle](http://jsfiddle.net/)? –

+0

這裏是一些代碼,由於某種原因無法登錄:s http://jsfiddle.net/7vP2e/ – Renai

回答

1

解決方法是爲您的內容區域設置特定的高度增量增量。這可以通過兩種方式來完成:

  1. 如果您的內容主要是文本,您可以設置line-height和/或用任何其它元素的高度成爲所需的增量(或其倍數)和希望最好的。
  2. 如果這不起作用,唯一的方法就是使用JavaScript。

下面是這個非常挑戰的一對夫婦的討論,包括利用行高一些想法和一些開始在可行的JavaScript代碼:

+0

基本上是的,但我讀了關於ie8的邊界圖像屬性不工作,這就是爲什麼我想成爲謹慎選擇我使用的選擇器等等。頂部div沒有問題加入,其中間div導致問題,因爲它觸及並不符合可變內容長度。我現在正在考慮訴諸直線垂直邊緣,因此背景圖像中沒有中斷,頂部和底部周圍沒有粗糙的邊緣。 – Renai

+0

@Renai仍然無法想象你的問題。你能否鏈接到帶有背景圖片和粗糙邊緣的頁面? –

+0

http://jsfiddle.net/7vP2e/擁有html和css。 我可以在哪裏上傳圖片以向我展示我的意思? – Renai