如何使文本透明（HTML/CSS）
Posted
技术标签:
【中文标题】如何使文本透明（HTML/CSS）【英文标题】：How to make text transparent (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://***.com/questions/10835500/how-to-change-text-transparency-in-html-css 重复，但您可以使用opacity: 0。
只是澄清一下-您希望导航栏本身是黑色的，但其中的文本有点像在黑色中“打一个洞”，以便身体的不断变化的背景颜色显示出来-对吗?
这能回答你的问题吗？ How to change text transparency in 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>注意：为了获得精确的精度，我们需要稍微改变背景的位置 - 在上面的例子中，这种错觉是有效的，因为导航栏靠近身体的顶部，而线性渐变并没有太大变化，所以它或多或少在正确的地方。
【讨论】：
以上是关于如何使文本透明（HTML/CSS）的主要内容，如果未能解决你的问题，请参考以下文章