文本后面的偏移块颜色答案

【问题标题】：Offset block colour behind text文本后面的偏移块颜色
【发布时间】：2018-05-02 18:02:20
【问题描述】：

我正在寻找一种方法来设置这样的文本样式：

我已经尝试过 h2::before 伪类，但是它将样式添加到整个 h2 元素而不是文本，因此不会在多行上设置样式。

h2{
  font-size: 48px;
  color: black;
  font-family: 'Roboto', sans-serif;
  font-weight: 900;
  line-height: 0.9;
}

h2::before {
  content: "";
    position: absolute;
    width: 100%;
    height: 10%;
    top: 21px;
    left: -10px;
    background: rgba(229, 57, 53, 100);
    z-index: -1;
}

想到了最好的方法吗？

【问题讨论】：

标签： html css text colors styles

【解决方案1】：

您可以将标题设为display:inline，然后像这样使用linear-gradient：

h2 {
  font-size: 48px;
  color: black;
  font-family: 'Roboto', sans-serif;
  font-weight: 900;
  display: inline;
  background-image: linear-gradient(#fff 60%, #ff9797 55%);
}

&lt;h2&gt;lorem ipsum lorem ipsum lorem ipsum lorem ipsum&lt;/h2&gt;

【讨论】：

这是一个很好的解决方案，可以在您的代码中使用，但由于某种原因，它仍然不会在我的 h2 上运行多行。它只出现在底线上。 <div class="container"> <div class="row"> <div class="col-lg-4 offset-lg-2"> <h2>Combatting your wasted time</h2> </div> </div> </div>css h2{ font-size: 48px; color: black; font-family: 'Roboto', sans-serif; font-weight: 900; line-height: 0.9; background-image:linear-gradient(white 60%,red 55%); }
@SimonRayRayAmor 问题出在行高上，删除它...你需要像我一样使 h2 inline
@SimonRayRayAmor 你不见了display: inline;