html – 在Chrome中将渐变文本与删除线/直通线结合使用

一个现在删除的答案似乎已经接近解释为什么它在Chrome中不起作用但不够接近,因为它现在被删除(我不知道为什么),我将添加一个更完整的解释.

发现：

根据MDN,-webkit-text-fill-color定义如下：

The -webkit-text-fill-color CSS property specifies the fill color of characters of text. If this property is not set,the value of the color property is used.

并且根据W3C Specs for text-decoration property,直通颜色指定如下：

The color(s) required for the text decoration should be derived from the ‘color’ property value.

看起来Chrome可能认为文本是透明的,因此也应该将透明颜色应用于线条.因此,我们没有看到任何线.但这不正确,因为根据规格它应该使用属于color属性的值.

Chrome正确设置颜色(对于相关代码段,颜色为黑色,但即使将其更改为其他颜色也不起作用),但不能正确应用于直线.例如,在下面的代码片段中,元素的颜色为绿色(从body继承),通过使用Dev控制台检查元素,我们可以看到颜色设置正确但没有直通.

body {
  background: black;
  color: green;
}
.gradienttext {
  background: -webkit-linear-gradient(#fff,#999);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}
.strike {
  text-decoration: line-through;
}

<p class="gradienttext">
  The following dummy text should both be a long vertical gradient,and also be strikethrough,which works fine on firefox,but not chrome. <span class='strike'> Lorem ipsum dolor sit amet,consectetur adipiscing elit,sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident,sunt in culpa qui officia deserunt mollit anim id est laborum.
</span>
</p>

如果我们将一些颜色应用于-webkit-text-fill-color属性,Chrome也会将相同的颜色应用于该行.这种似乎证实它将线条颜色设置为对相关代码透明.但是,对于您的情况,这不是一个可行的解决方案,因为您需要渐变文本.

body {
  background: black;
  color: green;
}
.gradienttext {
  background: -webkit-linear-gradient(#fff,#999);
  -webkit-background-clip: text;
  -webkit-text-fill-color: red;
}
.strike {
  text-decoration: line-through;
}

<p class="gradienttext">
  The following dummy text should both be a long vertical gradient,sunt in culpa qui officia deserunt mollit anim id est laborum.
</span>
</p>

当我们为-webkit-text-stroke-color属性设置一些颜色时,Chrome再次使用相同的颜色进行直通,但它似乎仅在我们给-webkit-text-stroke-width一个非零值时才有效再次产生不良输出.

body {
  background: black;
  color: green;
}
.gradienttext {
  background: -webkit-linear-gradient(#fff,#999);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}
.strike {
  text-decoration: line-through;
  -webkit-text-stroke-color: red;
  -webkit-text-stroke-width: 1px;
}

<p class="gradienttext">
  The following dummy text should both be a long vertical gradient,sunt in culpa qui officia deserunt mollit anim id est laborum.
</span>
</p>

即使将颜色明确地设置为span.strike也没有任何效果.

解决方法：

作为一种解决方法,您可以使用渐变背景图像来模拟通过效果,如下面的代码段中所示.

它使用的是1em高的渐变背景图像,从底部到顶部时仅为1px不透明.这会产生一种罢工或直通的幻觉(因此,从屏幕阅读器的角度来看,这可能并不好)

使用Webkit Gradient语法：

body {
  background: black;
}
.gradienttext {
  background: -webkit-linear-gradient(#fff,#999);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}
.strike {
  background: -webkit-linear-gradient(bottom,transparent calc(.5em - 1px),red calc(.5em - 1px),red .5em,transparent .5em);
  background-size: 100% 1em;
}

<p class="gradienttext">
  The following dummy text should both be a long vertical gradient,but not chrome. <span class="strike"> Lorem ipsum dolor sit amet,sunt in culpa qui officia deserunt mollit anim id est laborum.
</span>
</p>

使用标准渐变语法：

body {
  background: black;
}
.gradienttext {
  background: linear-gradient(#fff,#999);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}
.strike {
  background: linear-gradient(to top,sunt in culpa qui officia deserunt mollit anim id est laborum.
</span>
</p>