グラデーションの背景色に透明なテキストを書く必要があります

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>