如何使h2背景图像的高度“动态”

Question

我有1像素宽，35像素高的图像，我将其设置为h2元素的背景。随附的CSS如下：

h2 {
    background:transparent url(./images/h1_bg.gif) repeat-x left top;
    font-size:18px;
}

因此，只要标题适合一行，无论标题的长度如何，背景都将设置为图像。如果标题溢出到下一行，那么 图像未设置为较宽区域的背景，因为它仅在x方向上重复。我想我需要创建另一个图像，例如1px宽，60px高的图像，并将其设置为两行标题的背景。但我需要一些方法来检查标题是否是两行标题，所以我可以更改图像背景。我怎么做？另外，还有其他方法可以完成这项任务吗？

Answer 1

您通常只需要创建一个非常高的图像（例如100像素或更多）来处理此问题。保持底部的颜色为剩余的高度。

Answer 2

你可以使用身高来做到这一点。

  if($j("h1").height() > 30)
    {
        $j("h1").css("background","transparent url(./images/h1_bg_0.gif) repeat-x left top")
    }
  else
    {
        $j("h1").css("background","transparent url(./images/h1_bg_1.gif) repeat-x left top")
    }