Question

请找到此https://jsfiddle.net/91famhuv/8/

我正在使用webkit-text-fill-color和webkit-gradient为描述文字提供渐进式渐变效果。实际代码中有一个“显示更多”按钮，单击该按钮可以看到完整的描述。最初，只有几行显示渐变效果。

现在，在将google chrome更新到最新版本之前，它可以正常工作。更新Chrome浏览器后，不会出现初始说明文字。我可以用鼠标选择文本，但看不到。

即使在小提琴中，您也可以使用鼠标选择默认情况下不可见的“说明”旁边的文本。

最新的google chrome或webkit-text-fill-color是否存在问题？以及如何解决这个问题？

Answer 1

查看MDN网络文档：-webkit-text-fill-color

非标准 此功能是非标准的，不在标准轨道上。不要在面向Web的生产站点上使用它：不适用于每个用户。可能还大实现之间的不兼容性和行为可能会改变将来。

如果找到其他选择，我会接受。

Answer 2

我还认为，最新版本的Chrome可能存在与您所使用的规则相同的错误，不再适用于按钮，而是适用于其他任何元素。

不过，要解决您的问题，您可以更改规则：

    .description .info-cell {
        background-image: -webkit-gradient(linear, left top, left bottom, from(#f2f2f2), to(#242424));
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
    }

简单来说：

    .description-text {
        background-image: -webkit-gradient(linear, left top, left bottom, from(#f2f2f2), to(#242424));
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
    }

在您自己的JSFiddle中进行更改对我来说很有效，因此，在存在此错误的情况下，这是一种解决方法。

CSS-最新版Chrome中的webkit-text-fill-color问题

2 个答案: