将渐变文本与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-特定的道具和渐变语法，但刚刚了解到Firefox已经发布了与这些-webkit-特定道具的兼容性。

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

<强>调查结果：

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

  

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

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

  

文本修饰 所需的颜色应来自'color' 属性值。

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

Chrome正确设置color（对于相关代码段，颜色为黑色，但即使将其更改为其他颜色也不起作用），但不能正确应用于直通线。例如，在下面的代码段中，元素的color为绿色（继承自body），通过使用Dev控制台检查元素，我们可以看到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>

当我们为-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仅对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; }不透明。这会通过 或直线创建 罢工幻觉（因此，从屏幕阅读器的角度来看，这可能不太好。）

使用Webkit Gradient语法：

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

import android.support.design.widget.TabLayout;