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

Question

我在CSS中有一个渐变文本,我也希望能够在其中有一个删除线.这在Firefox中运行良好,但遗憾的是在Chrome中没有.任何人都知道如何在两种浏览器中使用它？

小提琴

.gradienttext {
    background: -webkit-linear-gradient(#fff, #999);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.strike {
    text-decoration: line-through;
}

<p class="gradienttext">
    Does <span="strike">not</span> work.
</p>

Answer 1

我非常惊讶所讨论的代码可以使用-webkit-特定的 props 和渐变语法，但现在才知道 Firefox 已经提供了与这些-webkit-特定 props 的兼容性。

现在删除的答案似乎已经接近解释为什么它在 Chrome 中不起作用，但还不够接近，因为它现在已被删除（我不知道为什么），我将添加更完整的解释。

发现：

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

-webkit-text-fill-color CSS 属性指定文本字符的填充颜色。如果未设置此属性，则使用颜色属性的值。

根据文本装饰属性的 W3C 规范，线的颜色指定如下：

文本装饰所需的颜色应源自“颜色”属性值。

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

Chrome 设置color正确（对于有问题的代码片段，颜色是黑色，但即使将其更改为另一种颜色也不起作用），但没有将其正确应用于穿过的线。例如，在下面的代码片段中，color元素的 是绿色的（继承自body），通过使用开发控制台检查该元素，我们可以看到 的color设置正确，但没有线路通过。

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

当我们为该属性设置某种颜色时，Chrome 再次对穿过的线使用相同的颜色，但它似乎只有在我们给出非零值-webkit-text-stroke-color时才起作用 ，这又会产生不需要的输出。-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, 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>

甚至color明确设置span.strike没有任何效果。

解决方法：

作为解决方法，您可以使用渐变背景图像来模仿删除线效果，如下面的代码片段所示。

1px它使用 1em 高的渐变背景图像，并且仅在从下到上时不透明。这会造成一种击穿的错觉或划线的错觉（因此，从屏幕阅读器等的角度来看，这可能不好）

使用 Webkit 渐变语法：

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

使用标准渐变语法：

body {
  background: black;
}
.gradienttext {
  background: linear-gradient(#fff, #999);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}
.strike {
  background: linear-gradient(to top, 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, 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>