元素内的动画CSS渐变

Question

我有一个正在适应的WordPress主题文件夹，无法弄清楚如何将此渐变应用于首页的特定元素。我已经在网上浏览了一下，到目前为止发现以下代码需要一个更准确的选择器来应用，但是问题是要找到有问题的元素！

body
 {background: linear-gradient(-45deg, #47bcc2, #bee9e8, #c4e7d4, #00bd9d, #8bd7d2);
    background-size: 400% 400%;
 animation: gradient 15s ease infinite;
}

@keyframes gradient {
    0% {
        background-position: 0% 50%;
    }
    50% {
        background-position: 100% 50%;
    }
    100% {
        background-position: 0% 50%;
    }
}

因此，我希望动画渐变色位于蓝绿色背景区域（当前为图像）内。向下滚动时，蓝绿色背景和标题文本会淡化为白色，从而显示出一个网格项目。

我不想将渐变应用于“ body”，但是我不确定在哪里应用渐变，因此其功能类似于蓝绿色图像-滚动时会褪色。

This is the teal image element I'm trying to change in inspector - prior to any tweaks

我设法在禁用图像元素的情况下获得了全身背景。似乎背景图像会覆盖我尝试的任何渐变。

Current view - applying gradient to body, with image element disabled

I 思考问题出在过渡/淡入淡出元素被编码到该图像部分并覆盖了线性渐变，但是我对这些调整还是陌生的！有人能指出我正确的方向吗？

谢谢！

编辑：这是我要适应的英雄标题的原始CSS，是否是将渐变CSS放在此处的情况？

.hero-header {
  position: fixed;
  width: 100%;
  height: 100%;
  width: 100vw;
  height: 100vh;
  top: 0;
  left: 0;
  z-index: 88; }
  .hero-header .media {
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center center;
    width: 100%;
    height: 100%;
    width: 100vw;
    height: 100vh;
    top: 0;
    left: 0;
    z-index: 88;
    position: absolute;
    opacity: 0;
    transform: translateZ(0) scale(1.015);
    transition: opacity 555ms cubic-bezier(0.39, 0.575, 0.565, 1) 100ms, transform 555ms cubic-bezier(0.39, 0.575, 0.565, 1) 200ms; }
    .hero-header .media.active {
      opacity: 1;
      transform: translateZ(0) scale(1); }
    .hero-header .media.unmount-transition {
      transition: opacity 400ms cubic-bezier(0.39, 0.575, 0.565, 1);
      transform: translateZ(0) scale(1); }

Answer 1

为了达到我想要的效果，这就是我所使用的！

原来，我只需要将选择器指向正确的跨度，然后！重要的是渐变属性。我知道这不是最佳实践，但仅此部分是完美的！

.hero-header span {background-image: linear-gradient(-45deg, #47bcc2, #bee9e8, #c4e7d4, #00bd9d, #8bd7d2)!important;
    background-size: 400% 400%!important;
 animation: gradient 15s ease infinite;
}

@keyframes gradient {
    0% {
        background-position: 0% 50%;
    }
    50% {
        background-position: 100% 50%;
    }
    100% {
        background-position: 0% 50%;
    }
}