白色背景上的文本渐变

Question

我正在尝试在文本内制作渐变动画。 例如，这就是我想要的，除了背景是白色的：

这是我的代码： html:

                 <h1>
                    Make it
                    <span id="elite" style="background-color: #fff;">
                    Elite
                    <span class="pops">
                      <span class="pop"></span>
                      <span class="pop"></span>
                      <span class="pop"></span>
                      <span class="pop"></span>
                            <span class="pop"></span>
                    </span>
                  </span>
                </h1>

CSS：

#elite {
  position: relative;
  font-size: 4rem;
  align-items: flex-end;
  color: hsl(0 0% 100%);
}

#elite > span:first-of-type {
  display: inline-block;
}

#elite > span:last-of-type {
  position: absolute;
  /* left: 98%; */
  /* bottom: 46%; */
  /* font-size: calc(var(--font-size) * 0.45); */
  opacity: 0.75;
}

#elite > span:nth-of-type(2) {
  display: inline;
  background: linear-gradient(to right, #ff4e50, #fc913a);
  -webkit-background-clip: text;
  background-clip: text;
  color: white; /* Set the text color to white */
}

/* Remove the background property in .pops, since it's not needed for the gradient inside text */
.pops {
  position: absolute;
  inset: 0;
  mix-blend-mode: darken;
  overflow: hidden;
  pointer-events: none;
  
}


/* h1 span:nth-of-type(2)::before {
  content: "";
  position: absolute;
  width: 200%;
  aspect-ratio: 1;
  left: 0%;
  translate: -50% 0;
  background: radial-gradient(circle at center, hotpink, yellow) 50% 50% / 400% 400% no-repeat;
  mix-blend-mode: color-dodge;
  animation: pop 3.25s infinite ease-in-out;
} */

@keyframes pop {
  50% {
    background-size: 100% 100%;
  }
}

.pop {
  height: var(--size, 100%);
  aspect-ratio: 1;
  background: radial-gradient(hsl(var(--h) 100% 70%) 25%, transparent 50%);
  position: absolute;
  display: inline-block;
  animation: scale var(--s, 2s) var(--d, 0s) infinite alternate;
  left: var(--x, 0);
  top: var(--y, 0);
  scale: 0;
  translate: -50% -50%;
  mix-blend-mode: multiply;
  filter: blur(2px);
  
}

.pop:nth-of-type(1) {
  --x: 10%;
  --y: 25%;
  --h: 277;
  --s2: 6;
  --d: -0.25s;
  --s: 6s;
}

.pop:nth-of-type(2) {
  --x: 50%;
  --y: 45%;
  --h: 140;
  --s2: 5;
  --d: -0.75s;
  --s: 5s;
}
.pop:nth-of-type(3) {
  --x: 65%;
  --y: 75%;
  --h: 210;
  --s2: 3;
  --d: -0.5s;
  --s: 3s;
}
.pop:nth-of-type(4) {
  --x: 85%;
  --y: 15%;
  --h: 320;
  --s2: 5;
  --d: -1s;
  --s: 2s;
}
.pop:nth-of-type(5) {
  --x: 15%;
  --y: 100%;
  --h: 40;
  --s2: 3;
  --d: -1s;
  --s: 2s;
}

@keyframes scale {
  to {
    scale: var(--s2);
  }
}

只有当#elite标签的背景设置为黑色时，它似乎才具有正确的文字效果。但是，我希望背景是白色的并且仍然具有相同的效果。我怎样才能实现这个目标？

Answer 1

h1 {
    background: #000;
    color: #fff;
}
#elite {
  position: relative;
  font-size: 4rem;
  align-items: flex-end;
  color: hsl(0 0% 100%);
}

#elite > span:first-of-type {
  display: inline-block;
}

#elite > span:last-of-type {
  position: absolute;
  opacity: 0.75;
}

#elite > span:nth-of-type(2) {
  display: inline;
  background: linear-gradient(to right, #ff4e50, #fc913a);
  -webkit-background-clip: text;
  background-clip: text;
  color: #fff; /* Set the text color to white */
}

.pops {
  position: absolute;
  inset: 0;
  mix-blend-mode: darken;
  overflow: hidden;
  pointer-events: none;

}

@keyframes pop {
  50% {
    background-size: 100% 100%;
  }
}

.pop {
  height: var(--size, 100%);
  aspect-ratio: 1;
  background: radial-gradient(hsl(var(--h) 100% 70%) 25%, transparent 50%);
  position: absolute;
  display: inline-block;
  animation: scale var(--s, 2s) var(--d, 0s) infinite alternate;
  left: var(--x, 0);
  top: var(--y, 0);
  scale: 0;
  translate: -50% -50%;
  mix-blend-mode: multiply;
  filter: blur(2px);

}

.pop:nth-of-type(1) {
  --x: 10%;
  --y: 25%;
  --h: 277;
  --s2: 6;
  --d: -0.25s;
  --s: 6s;
}

.pop:nth-of-type(2) {
  --x: 50%;
  --y: 45%;
  --h: 140;
  --s2: 5;
  --d: -0.75s;
  --s: 5s;
}
.pop:nth-of-type(3) {
  --x: 65%;
  --y: 75%;
  --h: 210;
  --s2: 3;
  --d: -0.5s;
  --s: 3s;
}
.pop:nth-of-type(4) {
  --x: 85%;
  --y: 15%;
  --h: 320;
  --s2: 5;
  --d: -1s;
  --s: 2s;
}
.pop:nth-of-type(5) {
  --x: 15%;
  --y: 100%;
  --h: 40;
  --s2: 3;
  --d: -1s;
  --s: 2s;
}

@keyframes scale {
  to {
    scale: var(--s2);
  }
}

/* inverted */
h1.invert {
    background: #fff;
    color: #000;
}
h1.invert .pops {
    /* https://developer.mozilla.org/en-US/docs/Web/CSS/mix-blend-mode */
    mix-blend-mode: lighten;
}
h1.invert .pop {
    /* https://developer.mozilla.org/en-US/docs/Web/CSS/mix-blend-mode */
    mix-blend-mode: overlay;
}
h1.invert #elite {
  color: #888;
}

/* added for this demo */
body {
    background: #cecece;
    display: grid;
    justify-content: center;
}

h1 {
    font-family: sans-serif;
    padding: 0 1rem;
    width: min-content;
    white-space: nowrap;
}

<h1>
  Make it
  <span id="elite">
    Elite
    <span class="pops">
      <span class="pop"></span>
      <span class="pop"></span>
      <span class="pop"></span>
      <span class="pop"></span>
      <span class="pop"></span>
    </span>
  </span>
</h1>

<h1 class="invert">
  Make it
  <span id="elite">
    Elite
    <span class="pops">
      <span class="pop"></span>
      <span class="pop"></span>
      <span class="pop"></span>
      <span class="pop"></span>
      <span class="pop"></span>
    </span>
  </span>
</h1>

h1 {
    background: #000;
    color: #fff;
}
#elite {
  position: relative;
  font-size: 4rem;
  align-items: flex-end;
  color: hsl(0 0% 100%);
}

#elite > span:first-of-type {
  display: inline-block;
}

#elite > span:last-of-type {
  position: absolute;
  opacity: 0.75;
}

#elite > span:nth-of-type(2) {
  display: inline;
  background: linear-gradient(to right, #ff4e50, #fc913a);
  -webkit-background-clip: text;
  background-clip: text;
  color: #fff; /* Set the text color to white */
}

.pops {
  position: absolute;
  inset: 0;
  mix-blend-mode: darken;
  overflow: hidden;
  pointer-events: none;

}

@keyframes pop {
  50% {
    background-size: 100% 100%;
  }
}

.pop {
  height: var(--size, 100%);
  aspect-ratio: 1;
  background: radial-gradient(hsl(var(--h) 100% 70%) 25%, transparent 50%);
  position: absolute;
  display: inline-block;
  animation: scale var(--s, 2s) var(--d, 0s) infinite alternate;
  left: var(--x, 0);
  top: var(--y, 0);
  scale: 0;
  translate: -50% -50%;
  mix-blend-mode: multiply;
  filter: blur(2px);

}

.pop:nth-of-type(1) {
  --x: 10%;
  --y: 25%;
  --h: 277;
  --s2: 6;
  --d: -0.25s;
  --s: 6s;
}

.pop:nth-of-type(2) {
  --x: 50%;
  --y: 45%;
  --h: 140;
  --s2: 5;
  --d: -0.75s;
  --s: 5s;
}
.pop:nth-of-type(3) {
  --x: 65%;
  --y: 75%;
  --h: 210;
  --s2: 3;
  --d: -0.5s;
  --s: 3s;
}
.pop:nth-of-type(4) {
  --x: 85%;
  --y: 15%;
  --h: 320;
  --s2: 5;
  --d: -1s;
  --s: 2s;
}
.pop:nth-of-type(5) {
  --x: 15%;
  --y: 100%;
  --h: 40;
  --s2: 3;
  --d: -1s;
  --s: 2s;
}

@keyframes scale {
  to {
    scale: var(--s2);
  }
}

/* inverted */
h1.invert {
    background: #fff;
    color: #000;
}
h1.invert .pops {
    /* https://developer.mozilla.org/en-US/docs/Web/CSS/mix-blend-mode */
    mix-blend-mode: lighten;
}
h1.invert .pop {
    /* https://developer.mozilla.org/en-US/docs/Web/CSS/mix-blend-mode */
    mix-blend-mode: overlay;
}
h1.invert #elite {
  color: #888;
}

/* added for this demo */
body {
    background: #cecece;
    display: grid;
    justify-content: center;
}

h1 {
    font-family: sans-serif;
    padding: 0 1rem;
    width: min-content;
    white-space: nowrap;
}

<h1>
  Make it
  <span id="elite">
    Elite
    <span class="pops">
      <span class="pop"></span>
      <span class="pop"></span>
      <span class="pop"></span>
      <span class="pop"></span>
      <span class="pop"></span>
    </span>
  </span>
</h1>

<h1 class="invert">
  Make it
  <span id="elite">
    Elite
    <span class="pops">
      <span class="pop"></span>
      <span class="pop"></span>
      <span class="pop"></span>
      <span class="pop"></span>
      <span class="pop"></span>
    </span>
  </span>
</h1>