L'arrière-plan et le texte transparent sont coupés

Question

Existe-t-il un moyen d'utiliser CSS pour créer l'effet couper le texte transparent à partir de l'arrière-plan comme indiqué ci-dessous ?

Il serait dommage de perdre tout ce précieux référencement car les images remplacent le texte.

J'ai d'abord pensé aux ombres mais je ne pouvais penser à rien...

Cette image est l'arrière-plan du site Web, positionné de manière absolue <img> tag

P粉200138510 · Answer

Bien que cela puisse être réalisé avec CSS, une meilleure approche consiste à utiliser Inline SVG avec SVG Masks. Cette approche présente certains avantages par rapport au CSS :

Meilleure prise en charge des navigateurs : IE10+, chrome, Firefox, safari...
Cela n'affecte pas le référencement car les robots peuvent explorer le contenu SVG (Google indexe le contenu SVG depuis 2010)

Démo CodePen : Masquage de texte SVG

body,html{height:100%;margin:0;padding:0;}
body{
  background:url('https://farm9.staticflickr.com/8760/17195790401_94fcf60556_c.jpg');
  background-size:cover;
  background-attachment:fixed;
}
svg{width:100%;}

Si votre objectif est de rendre le texte sélectionnable et consultable, vous devez l'inclure dans la balise 标记之外。以下示例显示了一种使用 < 保留透明文本的方法使用> :

body,html{height:100%;margin:0;padding:0;}
body{
  background:url('https://farm9.staticflickr.com/8760/17195790401_94fcf60556_c.jpg');
  background-size:cover;
  background-attachment:fixed;
}
svg{width:100%;}

P粉351138462 · Answer

CSS3 peut être implémenté, mais tous les navigateurs ne le prennent pas en charge

Avec clip de fond : texte vous pouvez utiliser un fond de texte mais il doit être aligné avec le fond de la page

body {
    background: url(http://www.color-hex.com/palettes/26323.png) repeat;
    margin:10px;
}
h1 { 
    background-color:#fff;
    overflow:hidden;
    display:inline-block; 
    padding:10px; 
    font-weight:bold;
    font-family:arial;
    color:transparent;
    font-size:200px;
}
span { 
    background: url(http://www.color-hex.com/palettes/26323.png) -20px -20px repeat;
    -webkit-text-fill-color: transparent;
    -webkit-background-clip: text;
    display:block;
}

ABCDEFGHIKJ