<h1> -tag，背景图像下划线，固定宽度</h1>

Question

我是stackoverflow.com的新手，这是我的第一篇文章：

我想要一个带下划线的h1文本。这个下划线将是一个图像，它的固定宽度应为420px。 h1中的文本通常比420px宽，但有时更短。现在我知道这些是将下划线作为图像的解决方案，但是如何仅为下划线设置固定宽度？

h1 {
background-image:url('images/hrBg.jpg');
background-position: 0px bottom;
background-repeat: repeat-x;
}

Answer 1

创建宽度为420px的背景图像。

然后使用以下css

h1 {
  background:url('images/hrBg.jpg') no-repeat left bottom;
  min-width:420px;
}

这将确保背景仅显示420px的背景。我添加了min-width属性，以防h1的内容小于420px。 no-repeat属性确保背景仅显示一次，因为我们通过实际图像设置了长度。