我一直在嘗試使我的文本透明，以便它變成與我的變色背景完全相同的顏色。以下是我正在使用的代碼；對你的幫助表示感謝。
<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>
uj5u.com熱心網友回復：
一個技巧是使用文本遮罩切出元素的背景。
在這種情況下，我們為每個 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>注意：為了獲得準確的準確性，我們需要非常輕微地改變背景的位置 - 在上面的情況下這種錯覺是有效的，因為導航欄靠近身體的頂部并且線性漸變沒有太大變化，所以它更多或少在正確的地方。
uj5u.com熱心網友回復：
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>轉載請註明出處，本文鏈接：https://www.uj5u.com/qianduan/351441.html
下一篇：CSS問題，選中狀態不會改變樣式