1

我正在使用具有线性渐变的背景图像来创建高亮文本效果，但这会导致不需要的底部边框：

.fancy-underline {
    text-decoration: none;
    background-image: -webkit-gradient(linear,left top, left bottom,from(rgba(255,255,255,.7)),to(rgba(255,255,255,.7))),-webkit-gradient(linear,left top, left bottom,from(#91c678),to(#91c678));
    background-image: linear-gradient(rgba(255,255,255,.7),rgba(255,255,255,.7)),linear-gradient(#91c678,#91c678);
    background-position: 0 100%;
    background-repeat: no-repeat;
    background-size: 100% 50%;
}
<p><span class="fancy-underline">here is some fancy underline</span></p>

我在调试器的计算样式下看不到任何可能导致这种情况的东西，所以我认为这一定是我的线性渐变的问题。谁能指出我正确的方向？

4

1 回答 1

1

您可以覆盖更多区域，如下所示。您使渐变足够大，然后将其移动以露出顶部50%，您将获得与您所做的相同的结果

.fancy-underline {
    text-decoration: none;
    background-image: linear-gradient(rgba(255,255,255,.7),rgba(255,255,255,.7)),linear-gradient(#91c678,#91c678);
    background-position: 0 -50%;
    background-repeat: no-repeat;
    background-size: 100% 200%;
}
<p><span class="fancy-underline">here is some fancy underline</span></p>

了解其工作原理的相关问题：在线性梯度上使用具有背景位置的百分比值

放大版本以更好地查看：

.fancy-underline {
  text-decoration: none;
  font-size:100px;
  background-image: linear-gradient(rgba(255, 255, 255, .7), rgba(255, 255, 255, .7)), linear-gradient(#91c678, #91c678);
}
.new {
  background-position: 0 -50%;
  background-size: 100% 200%;
  background-repeat:no-repeat
}

.old {
  background-position: 0 100%;
  background-size: 100% 50%;
  background-repeat:no-repeat
}
<span class="fancy-underline new">new</span>
<span class="fancy-underline old">old</span>

于 2020-03-09T10:11:48.707 回答