CSS Фоновый градиент фонового изображения, показывающий нежелательную границу в Chrome - PullRequest
Новая
       75

CSS Фоновый градиент фонового изображения, показывающий нежелательную границу в Chrome

1 голос
/ 09 марта 2020

Я использую фоновое изображение с линейным градиентом, чтобы создать эффект выделения текста, но он вызывает нежелательную нижнюю границу: 

.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>

Я не вижу ничего в вычисляемых стилях в отладчике, которое могло бы вызвать это, поэтому я думаю, что это должно быть проблемой с моим линейным градиентом. Кто-нибудь может указать мне правильное направление?

1 Ответ

1 голос
/ 09 марта 2020

Вы можете покрыть больше области, как показано ниже. Вы делаете градиент достаточно большим и сдвигаете его, чтобы раскрыть вершину 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>

Связанный вопрос, чтобы понять, как это работает: Использование процентных значений с background-position для линейного градиента

Увеличенная версия, чтобы лучше видеть: 

.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>
...