width -

Question

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

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

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

Answer 1

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

然后使用下面的css

    h1 {
      background:url('https://images.squarespace-cdn.com/content/v1/5834a5fd9de4bb511a531745/1572560269010-YEGGAHEJ1O3AG5OAMO7M/ke17ZwdGBToddI8pDm48kEnLsHrnzeww6Ind1smsg7N7gQa3H78H3Y0txjaiv_0fDoOvxcdMmMKkDsyUqMSsMWxHk725yiiHCCLfrh8O1z5QPOohDIaIeljMHgDF5CVlOqpeNLcJ80NK65_fV7S1UZMvWVOiG2zXPfa_FplZumXplNQ97KbZI2EjeHIoBACLnr1xKjsq_-rO8kOgOtwYvw/Burning-Up-BG.jpg?format=2500w') no-repeat left bottom;
      min-width:420px;
    }

<h1>Text here</h1>

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