我需要在渐变背景颜色上使用透明文字编写

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>