最小限のCSSを適用したサンプルを用意したので、まずはそちらを確認いただけたらと思う。
https://sample.simplesimples.com/github/mask/

マスク。まず大きく分けて2つある。
・PNGやSVG画像でマスクする
・文字列の背景に画像をセットする

そして、PNGやSVG画像でマスクする場合、その方法2種類ある
・背景画像でマスクする（PNG、SVG）→ mask-image
・パスでマスクする（SVG）→ clip-path

文字列の背景に画像をセットする方法は、1種類、「text-clip」だ。

それでは一つずつ見ていく。

mask-image

メリット：簡単に実装できる。svg画像だけでなく、透過のpng画像にも対応している。
デメリット：ブラウザで確認する際、httpから始まるURLからアクセスする必要がある（ただし、Mampのようなサービスを使えば、ローカルでもhttpから確認できる）。

コア部分のスタイルを抜粋。

mask-image: url(heart.png);
mask-repeat: no-repeat;
mask-position: 0 0;
mask-size: contain;

背景画像に指定する際に、background を使用するが、background の文字列を mask に変更するだけ。
これで背景画像を指定している要素の中は、この背景画像でマスク（クリップ）して切り抜きできる。

ちなみに、下の画像は、左が Mampを使って、httpからアクセスした場合（問題なし）。右側が ブラウザで直接 htmlファイルを開いた場合（mask-imageが適用されない）。

clip-path

メリット：さまざまなシェイプでマスク（クリップ）して切り抜きできる。
デメリット：pathの情報が必要（ただし、VSCodeを使えば簡単にパス情報を抜き取ることができる）。

コア部分のスタイルを抜粋。

clip-path: path("M203.66,3.12c-70.13-18.31-83.66,49.09-83.66,69.67,0-20.58-13.53-87.98-83.66-69.67C-1.64,13.04-2.88,50.23,2.08,72.54s45.18,64.96,68.02,84.79c22.84,19.83,49.9,59.01,49.9,59.01,0,0,27.06-39.17,49.9-59.01s63.05-62.48,68.02-84.79c4.96-22.31,3.72-59.5-34.26-69.42Z");

path(“ここにパス情報をセットする”)。
パス情報の文字列に「うっ」と身構えた方、安心してください、VSCodeで簡単に抜き取れます。
VSCodeでは、svg画像を選択すると、svgファイル情報が表示される。
そこに表示されている、path要素のd属性の値をコピペするだけ。

これで、clip-path を指定している要素の中は、このSVGのパス内でマスク（クリップ）して切り抜きできる。

text-clip

mask-image、clip-path とは違って、テキスト入力して文字の背景に画像を適用することもできる。

コア部分のスタイルを抜粋。

background-clip: text;
color: transparent;

以上。

おまけ：clip-path

clip-pathには、pathの他にもいろいろシェイプを設定できる。
こちらもサンプルを用意したので、まずは見ていただけると理解が深まります。
https://sample.simplesimples.com/github/mask/clip-path.html

円形（circle）

clip-path: circle(50% at 50% 50%);

最初の50%は半径で、親要素の幅・高さに対する割合
at 50% 50% は円の中心の位置（デフォルトは50% 50%で中央）

楕円（ellipse）

clip-path: ellipse(50% 25% at 50% 50%);

最初の50% 25%は半径で、親要素の幅・高さに対する割合（横50%、縦25%）

矩形（inset）

clip-path: inset(10px 20px 30px 40px);

10px 20px 30px 40px は、親要素の上・右・下・左からの距離

多角形（polygon）

clip-path: polygon(50% 0%, 100% 100%, 0% 100%);

親要素の左上を 0% 0%、右下を 100% 100%、として、カンマ区切りで指定

SVG画像パス（url）

SVGファイルの中に、clipPath属性があれば、そのタグのid属性の値に合わせて、「clip-path:url(id名)」とすることもできるらしいが、今のところ使っていない。