How to make text transparent (HTML/CSS)-CodePudding

Ive been trying to make my text transparent so that it it becomes the exact same color as my color changing background. Below is the code that I'm working with; your help will be greatly appreciated.

<body>
<ul>
 <li><a href="mission.html" id=navbar>Dummy Text</a></li></ul>
</body>

<style>
body{
  animation: 10000ms ease-in-out infinite color-change;  padding: 5px 5%;
}

@keyframes color-change {
  0% {
    background-color:#0047ff;
  }

  50% {
    background-color:#6f0ce8;
  }

  100% {
    background-color:#0047ff;
  }
}


ul {
  list-style-type:none;
}

#navbar{
  font-weight: bolder;
  font-size: 33px;
  background-color: black;
  color: white;
  border-radius: 0.9rem;
  margin: 0.9rem;
  transition: 0.3s;
  text-decoration:none
}
</style>

CodePudding user response：

body {
  background-color: #0047ff;
}

ul {
  list-style-type: none;
}

#navbar {
  font-weight: bolder;
  font-size: 33px;
  background-color: black;
  color: white;
  border-radius: 0.9rem;
  margin: 0.9rem;
  transition: 0.3s;
  text-decoration: none
}

a:hover {
  opacity: 0
}

<ul>
  <li><a href="mission.html" id=navbar>Dummy Text</a></li>
</ul>

CodePudding user response：

One trick is to cut out the background of an element using text masking.

In this case we give the a elements within each li the same background (i.e. animation) as you've given the body.

Make the color in the a element transparent and it will mask out its background, making it look as though the background is the same as the body.

body {
  animation: 10000ms ease-in-out infinite color-change;
  padding: 5px 5%;
}

@keyframes color-change {
  0% {
    background-color: #0047ff;
  }
  50% {
    background-color: #6f0ce8;
  }
  100% {
    background-color: #0047ff;
  }
}

ul {
  list-style-type: none;
}

li a {
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  animation: 10000ms ease-in-out infinite color-change;
  padding: 5px 5%;
}

#navbar {
  font-weight: bolder;
  font-size: 33px;
  background-color: black;
  color: white;
  border-radius: 0.9rem;
  margin: 0.9rem;
  transition: 0.3s;
  text-decoration: none;
}

<body>
  <ul id="navbar">
    <li><a href="mission.html">Dummy Text</a></li>
  </ul>
</body>

Note: to get exact accuracy we'd need to change the positioning of the background very slightly - the illusion works in the case above because the navbar is near the top of the body and the linear gradient doesn't change much so it's more or less in the right place.