ホームページ > ウェブフロントエンド > CSSチュートリアル > 透明なテキストのカットアウトを作成する方法: CSS と SVG マスキング?

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

Susan Sarandon
リリース: 2024-12-22 15:45:11
オリジナル
143 人が閲覧しました

How to Create Transparent Text Cutouts: CSS vs. SVG Masking?

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>
ログイン後にコピー

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

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

ソース:php.cn
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
著者別の最新記事
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート