Google Chrome - 文本背景构成线条

Question

我试图在我的文本上有一个实时背景，即我网站上的 header，我使用 -webkit-text-fill-color，.....

但是这样做之后，我看到页面上出现了一些看不见的线条。

这个问题刚刚出现在GoogleChrome中，我不知道该怎么办。

我正在使用 Google Chrome 版本 85.0.4183.83（官方构建）（64 位）。

我在使用 Firefox 或其他浏览器时没有遇到这个问题。

提前致谢。

Answer 1

您的 CSS 属性未按照实现此效果所需的顺序排列。

首先填充颜色，然后剪辑，然后背景，然后回退颜色：

-webkit-text-fill-color: transparent;
-webkit-background-clip: text;
background: ...;
color: ...;