文字の中に画像（マスクテキスト）のCSSジェネレーター
指定した画像を文字の形に切り抜き、インパクトのあるテキストエフェクトを生成します。グラフィカルな見出しやタイトルの作成に適しています。
プレビュー
<div class="mask-text">{{mask_text}}</div>.mask-text {
font-size: {{font_size}}px;
font-weight: 900;
text-align: center;
padding: 20px;
/* 画像マスクの基本設定 */
background-image: url('{{img_url}}');
background-size: {{bg_size}};
background-position: {{bg_x}}% {{bg_y}}%;
background-repeat: no-repeat;
/* 文字の形に切り抜く */
-webkit-background-clip: text;
background-clip: text;
/* 文字色を透明にする */
color: transparent;
/* フォントの指定（インパクトのある太字を推奨） */
font-family: sans-serif;
}機能、使い方
- 指定した画像を、文字の形に切り抜いて表示するエフェクトを生成します。
- 単なる色指定では表現できない、グラフィカルで高級感のある見出しをCSSのみで実現可能です。
- 画像URLの変更や、背景の位置（X/Y）、サイズをリアルタイムに調整し、文字の中に見える範囲を最適化できます。
- インパクトを強めるために、できるだけ太いフォントファミリーとの併用を推奨します。
CSSプロパティの説明
background-clip: textは背景を指定した要素のテキスト（文字）の形に切り抜くプロパティです。
color: transparentを指定することで、本来の文字色を透明にし、背後の画像が見えるようにしています。
background-sizeやbackground-positionを調整することで、画像内のどの部分を文字に反映させるかを制御しています。
古いウェブブラウザへの互換性のため、-webkit-background-clipを併記しています。
