Css 如何设置背景图像的动画以移动到文本后面？

我正在为一个投资组合制作一个虚拟网站

到目前为止，看起来是这样的：

我想做的是让蓝天图像不断向右滚动，这样看起来云彩在标题文本中移动

以下是我现在为文本提供的CSS：

#site-title {
font-size: 20em;
background: url('../../img/colors.jpg') no-repeat bottom center;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}

是否可以使云背景无限向右移动而不影响文本

---

感谢您的帮助。

您可以使用关键帧来实现此效果

@keyframes animatedBackground {
    from { background-position: 0 0; }
    to { background-position: 100% 0; }
}

#animate-area   { 
    width: 560px; 
    height: 400px; 
    background-image: url(bg-clouds.png);
    background-position: 0px 0px;
    background-repeat: repeat-x;

    animation: animatedBackground 40s linear infinite;
}

---

请参阅。

您是否正在查看此功能，它看起来可以很好地工作，但我无法使其与我的代码一起工作。如果您发布代码或a，我可以尝试提供帮助。谢谢您的帮助，但我已将其修复。我愚蠢地忘记了供应商的前缀。谢谢你的帮助！

.text { 
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
   background-image: url(yourimage.jpg);
   background-size: 300% 300% !important;
   -webkit-animation: Gradient 10s ease-in-out infinite;
   -moz-animation: Gradient 10s ease-in-out infinite;
   animation: Gradient 10s ease-in-out infinite;
   margin:15px 0;
   font-size: 45px;
}
@-webkit-keyframes Gradient {
     0% {
         background-position: 0% 50% 
    }
     50% {
         background-position: 100% 50% 
    }
     100% {
         background-position: 0% 50% 
    }
}
 @-moz-keyframes Gradient {
     0% {
         background-position: 0% 50% 
    }
     50% {
         background-position: 100% 50% 
    }
     100% {
         background-position: 0% 50% 
    }
}
 @keyframes Gradient {
     0% {
         background-position: 0% 50% 
    }
     50% {
         background-position: 100% 50% 
    }
     100% {
         background-position: 0% 50% 
    }
}