css -webkit-text-fill-color在最新chrome中的问题

ghg1uchk  于 2023-07-31  发布在  Go
关注(0)|答案(3)|浏览(185)

请找到此https://jsfiddle.net/91famhuv/8/
我使用webkit-text-fill-colorwebkit-gradient为描述文本给予渐进渐变效果。实际代码有一个按钮“显示更多”,并通过点击该按钮的完整描述将是可见的.最初,只有几条线将是可见的渐变效果。
现在,在将google chrome更新到最新版本之前,它可以正常工作。更新chrome后,初始描述文本不会显示。我可以用鼠标选择文本,但它是不可见的。

即使在fiddle中,您也可以用鼠标选择“Description”旁边的文本,默认情况下该文本是不可见的。
最新的google chromewebkit-text-fill-color是否有问题?如何解决这个问题?

5ktev3wc

5ktev3wc1#

查看MDN Web文档:-webkit-text-fill-color

非标准此功能为非标准,不在标准轨道上。不要在面向Web的生产站点上使用它:它不会适用于每个用户。在实现之间也可能存在很大的不兼容性,并且行为可能在将来改变。

如果你有别的选择,我会接受的。

ddrv8njm

ddrv8njm2#

我还认为最新版本的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中修改这个对我来说是有效的,所以这是一个解决方法,而这个bug存在。

6bc51xsx

6bc51xsx3#

要解决此问题,请使用以下CSS属性:-webkit-print-color-adjust:精确的;

相关问题