我需要在漸變背景顏色上使用透明文字編寫

Question

有人可以幫助我瞭解如何創建本網站中的文本？

基本上，我需要的是文本顏色與白色背景上的漸變顏色（前身div的背景顏色）相同。

謝謝！

Answer 1

這不是我最好的工作，因爲它依賴於硬編碼的位置和背景大小，但它確實可以作爲快速和骯髒的解決方案。

文字出現要從周圍的黑色矩形剪下。

事實上文本的每個span具有其自己的背景，定位爲使得其與下方的h1的梯度背景完全對齊。

h1 { 
 
position: relative; 
 
display: block; 
 
width: 200px; 
 
height: 200px; 
 
background-image: linear-gradient(
 
red,orange,yellow,green,blue,indigo,violet 
 
); 
 
} 
 

 
h1 span { 
 
display: block; 
 
position: relative; 
 
top: 10px; 
 
width: 180px; 
 
height: 50px; 
 
margin: 20px 10px; 
 
line-height: 50px; 
 
font-size: 40px; 
 
text-align: center; 
 
background-color: rgb(0, 0, 0); 
 
} 
 

 
h1 span::after { 
 
position: absolute; 
 
top: 0; 
 
left: 0; 
 
width: 100%; 
 
background-image: linear-gradient(
 
red,orange,yellow,green,blue,indigo,violet 
 
); 
 
background-size: 200px 200px; 
 
background-clip: text; 
 
-webkit-text-fill-color: transparent; 
 
} 
 

 
h1 span:nth-of-type(1)::after { 
 
content: 'Example'; 
 
background-position: -20px -20px; 
 
} 
 

 
h1 span:nth-of-type(2)::after { 
 
content: 'Text'; 
 
background-position: -20px -80px; 
 
}

<h1> 
 
<span>Example</span> 
 
<span>Text</span> 
 
</h1>