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

【问题标题】：how to make a h2 background image 'dynamic' in height as well如何使 h2 背景图像的高度也“动态”
【发布时间】：2009-07-07 19:45:12
【问题描述】：

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

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

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

【问题讨论】：

你能发一个背景的例子吗？没有它很难知道推荐什么。您也许可以在left bottom 放置一个高大的图像。
背景实际上是灰色的。与设置“background-color: gray”的唯一区别是它在顶部较暗，并逐渐消失直到底部为白色。但是图像最底部的像素还是深灰色，因此整体效果是带有下划线的渐变背景，可以这么说

标签： css image

【解决方案1】：

您通常只通过创建一个非常高的图像（例如 100 像素或更高）来解决此问题。保持底行颜色为高度的剩余部分。

【讨论】：

或者，如果图像底部一直是纯色，您可以设置背景颜色以匹配并保持图像不变
是的。虽然如果你有透明的圆形或其他切口，你不能使用背景颜色。
U62 -“你说的“保持底行颜色保持高度的剩余部分是什么意思？”
我的意思是，如果你有一个从上到下渐变的 30 像素高的图像，将它加载到你最喜欢的图像编辑应用程序中，将高度扩展到 100 像素（或其他），然后为与原始图像底行颜色相同的新像素。在大多数应用程序中，一个简单的方法是矩形选择底部的像素行，复制然后粘贴，然后将选择的底部拉伸到图像的底部。
啊，我明白了。我认为它与css/html有关。谢谢。

【解决方案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")
    }

【讨论】：

您实际上想要依赖 javascript 来解决静态标记/css 无法轻松解决的问题？！