html - 我无法让 Rainbow Text 工作。我在这里做错了什么吗？

Question

所以目前我正在通过 Codeanywhere 为我的一门大学类(class)完成一个网站，但我似乎无法让彩虹文本与我的代码一起工作。

我已经尝试解决这个问题 >> https://w3bits.com/rainbow-text/但是没有取得成功的结果。

  @media only screen and (min-width: 1025px) {
  .navbar-item img {
    max-height: 50px;
  }
  .column {
    border-radius: 10px;
    box-shadow: 0px 1px 10px 3px black;
    margin-right: 20px;
    background-color: #201f20;
  }
  .rainbow-text {
    background-image: repeating-linear-gradient(45deg, violet, indigo, blue, green, yellow, orange, red, violet);
    text-align: center;
    background-size: 800% 800%;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    font-size: 24px;
    animation: rainbow 8s ease infinite;
  }
  @keyframes rainbow {
    0% {
      background-position: 0% 50%
    }
    50% {
      background-position: 100% 25%
    }
    100% {
      background-position: 0% 50%
    }
  }

<div class="hero-body">
  <div class="container has-text-centered">
    <h1 class="title" style="">
      1st Level - Clearnet
    </h1>
    <hr style="background-color: grey; margin-bottom: 40px;">
    <div class="column">
      <a imageanchor="1"><img align="right" src="../images/imagine.jpg" border="0"></a>
      <div class="ranbow-text">
        <p class="subtitle">
          Imagine there is a large paragraph of text here
        </p>
      </div>
    </div>
  </div>
</div>

所以基本上我试图让“想象这里有一大段文字”变成彩虹色。到目前为止，我失败了，现在需要帮助。

Answer 1

您在 <div class="ranbow-text"> 中有错字你缺少一个“我”-> <div class="rainbow-text"> .此外，您的样式仅在窗口结束时应用 1025px根据您的媒体查询宽度，因此在运行 stackoverflow.com 中的小框中的代码时即使您更正了拼写错误，它也不会起作用。也有可能您在同一个窗口中打开开发工具进行开发，这占用了您的一些宽度，因此您看不到彩虹色。

请参阅以下代码中的工作示例:

  @media only screen and (min-width: 200px) {
  .navbar-item img {
    max-height: 50px;
  }
  .column {
    border-radius: 10px;
    box-shadow: 0px 1px 10px 3px black;
    margin-right: 20px;
    background-color: #201f20;
  }
  .rainbow-text {
    background-image: repeating-linear-gradient(45deg, violet, indigo, blue, green, yellow, orange, red, violet);
    text-align: center;
    background-size: 800% 800%;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    font-size: 24px;
    animation: rainbow 8s ease infinite;
  }
  @keyframes rainbow {
    0% {
      background-position: 0% 50%
    }
    50% {
      background-position: 100% 25%
    }
    100% {
      background-position: 0% 50%
    }
  }

<div class="hero-body">
  <div class="container has-text-centered">
    <h1 class="title" style="">
      1st Level - Clearnet
    </h1>
    <hr style="background-color: grey; margin-bottom: 40px;">
    <div class="column">
      <a imageanchor="1"><img align="right" src="../images/imagine.jpg" border="0"></a>
      <div class="rainbow-text">
        <p class="subtitle">
          Imagine there is a large paragraph of text here
        </p>
      </div>
    </div>
  </div>
</div>