javascript - 我需要在渐变背景色上使用透明文本书写

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>