透明なテキストのカットアウトを作成する方法: CSS と SVG マスキング?

CSS または SVG マスキングを使用して背景から透明なテキストを切り取る

テキストが切り取られたように見える透明なテキスト効果を作成する背景は一般的なデザイン要件です。 CSS を使用してこの効果を実現することもできますが、より堅牢で有利なアプローチは SVG マスキングを利用することです。

CSS ベースのアプローチ:

CSS を使用すると、スプレッド半径値を使用してテキストシャドウを適用して、透明なテキスト効果を作成できます。ただし、この方法ではブラウザのサポートが制限されており、SEO に悪影響を与える可能性があります。

SVG マスキング アプローチ:

最適なパフォーマンスと SEO の利点を備えた透明テキストのカットアウトを実現するには、次の使用を検討してください。 SVG マスキングを備えたインライン SVG。この手法にはいくつかの利点があります。

• 強化されたブラウザ サポート: IE10、Chrome、Firefox、Safari でサポート。
• SEO の維持: スパイダーは SVG コンテンツをクロールし、テキストが検索によってインデックス付け可能であることを保証します

実装:

SVG マスキングを実装するには、透明領域を定義するマスク要素を含む SVG を作成します。テキストはマスクされた領域内に配置されます。

コード例:

body,html{height:100%;margin:0;padding:0;}
body{background:url(...);background-size:cover;background-attachment:fixed;}
svg{width:100%;}

<svg viewbox="0 0 100 60">
  <defs>
    <mask></mask></defs></svg>

SVG マスキングを利用すると、透明なテキストの切り抜き効果を実現できます。ユーザーエクスペリエンスとSEOの両方のために最適化されています。

以上が透明なテキストのカットアウトを作成する方法: CSS と SVG マスキング?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。