html - 在 Chrome 中将渐变文本与删除线/线相结合

Question

我在 CSS 中有一个渐变文本，我也希望能够在其中添加删除线。这在 Firefox 中运行良好，但遗憾的是在 Chrome 中却不行。有人知道如何让它在两种浏览器中工作吗？

FIDDLE

.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- 特定的 Prop 和渐变语法一起使用，但现在才知道 Firefox 已经发布了与这些 -webkit- 的兼容性> 具体 Prop 。

一个现已删除的答案似乎已经接近于解释为什么它在 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 正确设置了 color(对于有问题的代码段，颜色是黑色，但即使将其更改为另一种颜色也不起作用)但没有将其正确应用于直通线。例如，在下面的代码片段中，元素的 color 是绿色的(继承自 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, 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-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, 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 也没有任何效果。

---

解决方法:

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

它使用 1em 高的渐变背景图像，并且在从下到上移动时仅 1px 不透明。这会产生一种划线或划线的错觉(因此，从屏幕阅读器等 Angular 来看，这可能不太好)

使用 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>