Comment créer des découpes de texte transparentes : masquage CSS ou SVG ?

Texte transparent découpé de l'arrière-plan avec masquage CSS ou SVG

Création d'un effet de texte transparent où le texte semble avoir été coupé de l'arrière-plan est une exigence de conception courante. Bien qu'il soit possible d'obtenir cet effet en utilisant CSS, une approche plus robuste et plus avantageuse consiste à utiliser le masquage SVG.

Approche basée sur CSS :

En utilisant CSS, vous peut appliquer une ombre de texte avec une valeur de rayon de propagation pour créer un effet de texte transparent. Cependant, cette méthode a une prise en charge limitée par les navigateurs et peut avoir un impact négatif sur le référencement.

Approche de masquage SVG :

Pour obtenir une découpe de texte transparente avec des performances optimales et des avantages en matière de référencement, envisagez d'utiliser un SVG en ligne avec masquage SVG. Cette technique offre plusieurs avantages :

• Prise en charge améliorée du navigateur : Prise en charge par IE10, Chrome, Firefox et Safari.
• Préserve le référencement : Les araignées peuvent explorer le contenu SVG, garantissant ainsi que votre texte reste indexable par recherche moteurs.

Implémentation :

Pour implémenter le masquage SVG, créez un SVG avec un élément de masque pour définir la zone transparente. Le texte est ensuite positionné dans la zone masquée.

Exemple de code :

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>

En utilisant le masquage SVG, vous pouvez obtenir un effet de découpe de texte transparent qui est optimisé à la fois pour l'expérience utilisateur et le référencement.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!