html - 使图像充当文本下划线

Question

我想让这个笔划图像充当文本下划线，除了笔划图像等于容器 div 宽度而不是文本长度宽度之外，我几乎明白了。

h1 { text-align: center; }

.container { width: 500px; margin: 0 auto;}

.text-underline {
    background: transparent url("https://cockandbullfestival.co.uk/wp-content/themes/cock_bull/img/nav_underline.png") center bottom repeat-x;
}

<div class="container">
    <h1 class="text-underline"> Text With Stroke Underline </h1>
</div>

我怎样才能使这个笔划图像充当文本下划线？

Answer 1

考虑 h1 中的 span 元素 (内联元素)，这样您就有了收缩以适应行为。

h1 {
  text-align: center;
}

.container {
  width: 500px;
  margin: 0 auto;
}

.text-underline span {
  background: url("https://cockandbullfestival.co.uk/wp-content/themes/cock_bull/img/nav_underline.png") center bottom repeat-x;
}

<div class="container">
  <h1 class="text-underline"> <span>Text With Stroke Underline</span> </h1>
</div>

它也适用于多行文本

h1 {
  text-align: center;
}

.container {
  width: 500px;
  margin: 0 auto;
}

.text-underline span {
  background: url("https://cockandbullfestival.co.uk/wp-content/themes/cock_bull/img/nav_underline.png") center bottom repeat-x;
}

<div class="container">
  <h1 class="text-underline"> <span>Text With Stroke Underline Underline Underline Underline Underline Underline</span> </h1>
</div>