2011-09-21 91 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