如何使文本透明（HTML/CSS）答案

【问题标题】：How to make text transparent (HTML/CSS)如何使文本透明（HTML/CSS）
【发布时间】：2021-12-19 23:06:27
【问题描述】：

我一直在尝试使我的文本透明，以便它变成与我的变色背景完全相同的颜色。下面是我正在使用的代码；非常感谢您的帮助。

<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>

【问题讨论】：

color: transparent;
此问题可能与https://stackoverflow.com/questions/10835500/how-to-change-text-transparency-in-html-css 重复，但您可以使用opacity: 0。
只是澄清一下-您希望导航栏本身是黑色的，但其中的文本有点像在黑色中“打一个洞”，以便身体的不断变化的背景颜色显示出来-对吗?
这能回答你的问题吗？ How to change text transparency in HTML/CSS?

标签： html css

【解决方案1】：

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>

【讨论】：

【解决方案2】：

一个技巧是使用文本掩码去除元素的背景。

在这种情况下，我们为每个 li 中的 a 元素赋予与你赋予 body 相同的背景（即动画）。

使 a 元素中的颜色透明，它会掩盖其背景，使其看起来好像背景与主体相同。

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>

注意：为了获得精确的精度，我们需要稍微改变背景的位置 - 在上面的例子中，这种错觉是有效的，因为导航栏靠近身体的顶部，而线性渐变并没有太大变化，所以它或多或少在正确的地方。

【讨论】：