元素内的动画css渐变答案

【问题标题】：Animated css gradient within element元素内的动画css渐变
【发布时间】：2020-02-27 21:27:32
【问题描述】：

我有一个我正在调整的组合 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

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

谢谢！

编辑：这是我正在尝试调整的 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); }

【问题讨论】：

因为图片是JPG，所以图片没有透明度，所以，改变背景没有任何效果（希望我理解你的问题），试试png。但更好的是，尝试将其拆分为多个图像以实现更具响应性的设计。
带有图像的<span> 位于任何身体背景的前面。您可以找到标题并尝试删除该图像。在最后一种情况下（不理想），使用.anyClassAsParent span { display: none! Important }。另外，我不确定您是尝试将背景添加到整个正文还是仅标题部分。
感谢您的回复！ murb - 我尝试过使用 png ，但它仍然无法正常工作。如果可能的话，我想用动画渐变替换图像。
Azametzin - 我试图只在标题部分使用渐变背景。如果可能的话，我想我正在尝试用渐变覆盖该图像？
还有@Azametzin 我试过.anyClassAsParent span { display: none! Important } 但它什么也没做？但如果它确实使图像不显示，我仍然会遇到尝试让渐变在滚动时淡出的问题。

标签： css wordpress css-selectors background-image portfolio

【解决方案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%;
    }
}

【讨论】：