css背景图像不是无缝的

时间:2011-09-21 17:10:33

标签: css html5 background-image border

我正在使用html5,并尝试创建粗边无缝边框(顶部,侧面+底部)。

我知道ie8不支持CSS3边框图像。 IE8早在我愿意照顾的时候就可以了。

所以使用3个div来显示背景图像,唯一的问题是取决于内容的长度,底部背景图像不能很好地对齐并使框看起来无缝,因为重复的中间图像被剪切在边界合并之前关闭。

我在photoshop中使用画笔来创建锯齿状容器。我对此有所了解,但无法找到合适的解决方案。

1 个答案:

答案 0 :(得分:1)

解决方案是为您的内容区域设置特定的高度增量增量。这可以通过以下几种方式完成:

  1. 如果您的内容主要是文字,则可以将line-height和/或任何其他使用元素的高度设置为所需的增量(或其倍数),并希望获得最佳效果。
  2. 如果这不起作用,唯一的另一种方法是使用JavaScript。
  3. 以下是对这一挑战的几个讨论,包括使用行高的一些想法以及可行的JavaScript代码的一些启动: