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

Question

有人可以帮助我了解如何在本网站创建文本？

基本上，我需要的是文本颜色与白色背景上的渐变颜色（前任div的背景颜色）相同。

谢谢！

Answer 1

这不是我最好的工作，因为它依赖于硬编码的位置和背景大小，但它确实可以作为一种快速而肮脏的解决方案。

文本出现，以便从周围的黑色矩形中剪切。

事实上，每个span文字都有自己的背景，其位置使其与下方h1的渐变背景完美对齐。

＆＃13;

＆＃13;

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;
}

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;