多行文字下划线+下划线全宽+响应式

Question

我有一个标题。在桌面屏幕上，标题是三行，在手机屏幕上是六行。

文本左对齐（不对齐）。

我希望所有文本行都带有“下划线”，并且该行是包含 div 宽度的 100%（而不是文本的宽度）。

行高以 em 为单位。在较小的断点处，字体大小以 vw 为单位。

我已经尝试创建一个重复的背景图像线性渐变，但由于行高以 ems 为单位测量，我只希望下划线为 1px 高度，浏览器计算下划线的高度小于1 像素（参见第二张图片，与线性渐变相比，边框顶部为 1 像素 - 两者都是 rgb(255,255,255)。因此下划线看起来很微弱。在较小的视口中很难看到。

有什么建议吗？

html {
  font-size: 62.5%;
}

.hero_image {
  color: rgb(255, 255, 255);
  background-color: rgb(0, 0, 0);
  padding-bottom: 8rem;
  max-width: 111.6rem;
}

.hero_image h1 {
  font-size: 12rem;
  line-height: 1.1em;
  background-image: linear-gradient(to bottom, rgb(0, 0, 0) calc(1.1em - 1px), rgb(0, 220, 200) 1.1em);
  background-repeat: repeat-y;
  background-size: 100% 1.1em;
}

@media screen and (max-width:660px) {
  html {
    font-size: 56%;
  }
  .hero_image h1 {
    font-size: 10vw;
  }
}

<div class="hero_image">
  <h1>XYZXYZ <br>fancy design agency for&nbsp;posh stuff</h1>
</div>

https://jsfiddle.net/4exgf7zs/1/

可能的解决方案 通过在线性渐变上添加第三个停止点，它现在似乎起作用了。并将线增加到2px。虽然我不明白为什么？

background-image: linear-gradient(to bottom, black calc(1.1em - 2px), white calc(1.1em - 2px), white 1.1em);

Answer 1

虽然我无法准确解释为什么会出现此问题，但可以避免在整个元素上使用 repeating-linear-gradient 而不是平铺的 linear-gradient。

html {
  font-size: 62.5%;
}

.hero_image {
  color: rgb(255, 255, 255);
  background-color: rgb(0, 0, 0);
  padding-bottom: 8rem;
  max-width: 111.6rem;
}

.hero_image h1 {
  font-size: 12rem;
  line-height: 1.1em;
  background-image: repeating-linear-gradient(
    to bottom,
    rgb(0, 0, 0),
    rgb(0, 0, 0)     calc(1.1em - 1px),
    rgb(0, 220, 200) calc(1.1em - 1px),
    rgb(0, 220, 200) 1.1em
  );
}

@media screen and (max-width:660px) {
  html {
    font-size: 56%;
  }
  .hero_image h1 {
    font-size: 10vw;
  }
}

<div class="hero_image">
  <h1>XYZXYZ <br>fancy design agency for&nbsp;posh stuff</h1>
</div>

此解决方案似乎导致了一些问题，即一行可能会出现在最后一行下方，也可能不会出现，您可能需要对其进行更多修改。