元素内的动画 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

我已经设法实现了禁用图像元素的完整 body 背景。 background-image 似乎覆盖了我尝试的任何梯度。

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

我认为问题在于 transition/fade 元素被编码到该图像部分并覆盖了线性渐变 - 但我对这些类型相当陌生的调整！有人能指出我正确的方向吗？

谢谢！

编辑：这是我正在尝试改编的 hero-header 的原始 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

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

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

.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%;
    }
}

元素内的动画 css 渐变

Animated css gradient within element

css

wordpress

portfolio

background-image

css-selectors