调整屏幕大小的背景剪辑属性问题

Question

我正在 HTML/CSS 的帮助下创建一个小网站。我正在使用此代码为我的文本添加线性渐变：

background-image: linear-gradient(-86deg, #F11267, #FF417C);
-webkit-background-clip: text;
background-clip: text;
-webkit-text-fill-color: transparent;

但这里有一个问题：当我使用移动设备或 MacBook 时，当我调整我的网站大小时，我的文本附近出现了一些奇怪的线条：

看起来 background-clip 没有完全剪切它并且在调整大小时无法正常工作。这用于 span 元素，所以宽度和高度不是我可以在这里使用的属性。

Answer 1

background-image: linear-gradient(-86deg, #F11267, #FF417C);
background-attachment: fixed;
background-size: 100%;
-webkit-background-clip: text;
background-clip: text;
-webkit-text-fill-color: transparent;

尝试这些，并尝试使用 background-origin 和 background-position 进行试验。