Texte transparent découpé en arrière-plan

Existe-t-il un moyen de faire un texte transparent coupé d'un effet d' arrière-plan comme celui de l'image suivante, avec CSS?
Il serait triste de perdre tout précieux SEO à cause des images remplaçant le texte.

J'ai d'abord pensé aux ombres mais je ne peux rien comprendre ...

L'image est l'arrière-plan du site, une <img>balise positionnée en absolu

C'est possible avec css3 mais ce n'est pas pris en charge dans tous les navigateurs

Avec background-clip: texte; vous pouvez utiliser un arrière-plan pour le texte, mais vous devrez l'aligner avec l'arrière-plan 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;
}

<h1><span>ABCDEFGHIKJ</span></h1>

http://jsfiddle.net/JGPuZ/1337/

Alignement automatique

Avec un peu de javascript, vous pouvez aligner l'arrière-plan automatiquement:

$(document).ready(function(){
  //Position of the header in the webpage
  var position = $("h1").position();
  var padding = 10; //Padding set to the header
  var left = position.left + padding;
  var top = position.top + padding;
  $("h1").find("span").css("background-position","-"+left+"px -"+top+"px"); 
});

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;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<h1><span>ABCDEFGHIKJ</span></h1>

http://jsfiddle.net/JGPuZ/1336/

Bien que cela soit possible avec CSS, une meilleure approche serait d'utiliser un SVG en ligne avec un masquage SVG . Cette approche présente certains avantages par rapport au CSS:

• Une meilleure prise en charge des navigateurs : IE10 +, chrome, Firefox, safari ...
• Cela n'a pas d'impact sur le référencement car les araignées peuvent explorer le contenu SVG ( google indexe le contenu SVG depuis 2010 )

Démo CodePen: masque 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%;}

<svg viewbox="0 0 100 60">
  <defs>
    <mask id="mask" x="0" y="0" width="100" height="50">
      <rect x="0" y="0" width="100" height="40" fill="#fff"/>
      <text text-anchor="middle" x="50" y="18" dy="1">SVG</text>
      <text text-anchor="middle" x="50" y="30" dy="1">Text mask</text>
    </mask>
  </defs>
  <rect x="5" y="5" width="90" height="30" mask="url(#mask)" fill-opacity="0.5"/>    
</svg>

Si vous souhaitez rendre le texte sélectionnable et consultable, vous devez l'inclure en dehors de la <defs>balise. L'exemple suivant montre un moyen de le faire en conservant le texte transparent avec la <use>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%;}

<svg viewbox="0 0 100 60">
  <defs>
    <g id="text">
      <text text-anchor="middle" x="50" y="18" dy="1">SVG</text>
      <text text-anchor="middle" x="50" y="30" dy="1">Text mask</text>
    </g>
    <mask id="mask" x="0" y="0" width="100" height="50">
      <rect x="0" y="0" width="100" height="40" fill="#fff"/>
      <use xlink:href="#text" />
    </mask>
  </defs>
  <rect x="5" y="5" width="90" height="30" mask="url(#mask)" fill-opacity="0.5"/>
  <use xlink:href="#text" mask="url(#mask)" />
</svg>

Une façon qui fonctionne sur la plupart des navigateurs modernes (à l'exception du bord par exemple), bien qu'avec un arrière-plan noir, consiste à utiliser

background: black;
color: white;
mix-blend-mode: multiply;

dans votre élément de texte, puis mettez l'arrière-plan de votre choix. Multiplier mappe essentiellement le code de couleur 0-255 à 0-1, puis multiplie cela par tout ce qui se trouve derrière, de sorte que le noir reste noir et blanc multiplié par 1 et devient effectivement transparent. http://codepen.io/nic_klaassen/full/adKqWX/

Il est possible, mais jusqu'à présent uniquement avec les navigateurs basés sur Webkit (Chrome, Safari, Rockmelt, quoi que ce soit sur la base du projet Chromium.)

L'astuce est d'avoir un élément dans le blanc qui a le même arrière-plan que le corps, puis de l'utiliser -webkit- background-clip: text;sur l'élément intérieur qui signifie essentiellement "ne pas étendre l'arrière-plan au-delà du texte" et d'utiliser du texte transparent.

section
{
    background: url(http://norcaleasygreen.com/wp-content/uploads/2012/11/turf-grass1.jpg);
    width: 100%;
    height: 300px;
}

div
{
    background: rgba(255, 255, 255, 1);
    color: rgba(255, 255, 255, 0);

    width: 60%;
    heighT: 80%;
    margin: 0 auto;
    font-size: 60px;
    text-align: center;
}

p
{
    background: url(http://norcaleasygreen.com/wp-content/uploads/2012/11/turf-grass1.jpg);
    -webkit-background-clip: text;
}
​

http://jsfiddle.net/BWRsA/

Je suppose que vous pourriez réaliser quelque chose comme ça en utilisantbackground-clip , mais je ne l'ai pas encore testé.

Voir cet exemple:
http://www.css3.info/wp-content/uploads/2008/03/webkit-backgroundcliptext_color.html
(Webkit uniquement, je ne sais pas encore comment changer le fond noir en fond blanc)

Je viens de découvrir une nouvelle façon de faire cela tout en déconnant, je ne suis pas tout à fait sûr de savoir comment cela fonctionne (si quelqu'un d'autre veut expliquer, faites-le).

Cela semble très bien fonctionner et ne nécessite aucun double arrière-plan ni JavaScript.

Voici le code: JSFIDDLE

body {
  padding: 0;
  margin: 0;
}

div {
  background: url(http://www.color-hex.com/palettes/26323.png) repeat;
  width: 100vw;
  height: 100vh;
}

body::before {
  content: '$ALPHABET';
  left: 0;
  top: 0;
  position: absolute;
  color: #222;
  background-color: #fff;
  padding: 1rem;
  font-family: Arial;
  z-index: 1;
  mix-blend-mode: screen;
  font-weight: 800;
  font-size: 3rem;
  letter-spacing: 1rem;
}

<div></div>

Vous pouvez utiliser une police inversée / négative / inversée et l'appliquer avec la font-face="…"règle CSS. Vous devrez peut-être jouer avec l'espacement des lettres pour éviter les petits espaces blancs entre les lettres.

Si vous n'avez pas besoin d'une police spécifique, c'est simple. Téléchargez-en un sympathique, par exemple à partir de cette collection de polices inversées .

Si vous avez besoin d'une police spécifique (par exemple, "Open Sans"), c'est difficile. Vous devez convertir votre police existante en une version inversée. Ceci est possible manuellement avec Font Creator, FontForge etc., mais nous voulons bien sûr une solution automatisée. Je n'ai pas encore trouvé d'instructions pour cela, mais quelques conseils:

• Comment convertir une police bitmap en police TrueType (plus encore une autre façon de le faire). On utiliserait d'abord les commandes ImageMagick pour rendre les glyphes de police en images raster haute résolution et pour les inverser, puis les reconvertir en une police TrueType avec les instructions ci-dessus.
• Est-il possible d'inverser une police avec FontForge ou un autre PGM?
• Création d'une police inversée (blanc sur noir)

Vous pouvez utiliser de myadzel Patternizer plugin jQuery pour obtenir cet effet à travers les navigateurs. Pour le moment, il n'y a pas de moyen multi-navigateurs de le faire avec seulement CSS.

Vous utilisez Patternizer en ajoutant class="background-clip"aux éléments HTML où vous souhaitez que le texte soit peint en tant que modèle d'image et en spécifiant l'image dans un data-pattern="…"attribut supplémentaire . Voir la source de la démo . Patternizer créera une image SVG avec du texte rempli de motifs et la calera sur l'élément HTML rendu de manière transparente.

Si, comme dans l'image d'exemple de la question, le motif de remplissage de texte doit faire partie d'une image d'arrière-plan s'étendant au-delà de l'élément "à motifs", je vois deux options (non testées, ma préférée en premier):

• Utilisez le masquage au lieu d'une image d'arrière-plan dans le SVG. Comme dans la réponse de web-tiki , à laquelle l'utilisation de Patternizer ajoutera toujours la génération automatique du SVG et un élément HTML invisible en haut qui permet la sélection et la copie de texte.
• Ou utilisez l'alignement automatique de l'image du motif. Peut être fait avec un code JavaScript similaire à celui de la réponse de Gijs .

il suffit de mettre ce css

    .banner-sale-1 .title-box .title-overlay {
      font-weight: 900;
      overflow: hidden;
      margin: 0;
      padding-right: 10%;
      padding-left: 10%;
      text-transform: uppercase;
      color: #080404;
      background-color: rgba(255, 255, 255, .85);

      /* that css is the main think (mix-blend-mode: lighten;)*/
      mix-blend-mode: lighten;

    }

J'avais besoin de créer un texte qui ressemblait exactement à celui de l'article original, mais je ne pouvais pas simplement le simuler en alignant les arrière-plans, car il y a une certaine animation derrière l'élément. Personne ne semble encore avoir suggéré cela, alors voici ce que j'ai fait: (J'ai essayé de le rendre aussi facile à lire que possible.)

var el = document.body; //Parent Element. Text is centered inside.
var mainText = "THIS IS THE FIRST LINE"; //Header Text.
var subText = "THIS TEXT HAS A KNOCKOUT EFFECT"; //Knockout Text.
var fontF = "Roboto, Arial"; //Font to use.
var mSize = 42; //Text size.

//Centered text display:
var tBox = centeredDiv(el), txtMain = mkDiv(tBox, mainText), txtSub = mkDiv(tBox),
ts = tBox.style, stLen = textWidth(subText, fontF, mSize)+5; ts.color = "#fff";
ts.font = mSize+"pt "+fontF; ts.fontWeight = 100; txtSub.style.fontWeight = 400;

//Generate subtext SVG for knockout effect:
txtSub.innerHTML =
"<svg xmlns='http://www.w3.org/2000/svg' width='"+stLen+"px' height='"+(mSize+11)+"px' viewBox='0 0 "+stLen+" "+(mSize+11)+"'>"+
    "<rect x='0' y='0' width='100%' height='100%' fill='#fff' rx='4px' ry='4px' mask='url(#txtSubMask)'></rect>"+
    "<mask id='txtSubMask'>"+
        "<rect x='0' y='0' width='100%' height='100%' fill='#fff'></rect>"+
        "<text x='"+(stLen/2)+"' y='"+(mSize+6)+"' font='"+mSize+"pt "+fontF+"' text-anchor='middle' fill='#000'>"+subText+"</text>"+
    "</mask>"+
"</svg>";

//Relevant Helper Functions:
function centeredDiv(parent) {
    //Container:
    var d = document.createElement('div'), s = d.style;
    s.display = "table"; s.position = "relative"; s.zIndex = 999;
    s.top = s.left = 0; s.width = s.height = "100%";
    //Content Box:
    var k = document.createElement('div'), j = k.style;
    j.display = "table-cell"; j.verticalAlign = "middle";
    j.textAlign = "center"; d.appendChild(k);
    parent.appendChild(d); return k;
}
function mkDiv(parent, tCont) {
    var d = document.createElement('div');
    if(tCont) d.textContent = tCont;
    parent.appendChild(d); return d;
}
function textWidth(text, font, size) {
    var canvas = window.textWidthCanvas || (window.textWidthCanvas = document.createElement("canvas")),
    context = canvas.getContext("2d"); context.font = size+(typeof size=="string"?" ":"pt ")+font;
    return context.measureText(text).width;
}

Jetez-le simplement dans votre window.onload, réglez l'arrière-plan du corps à votre image et regardez la magie opérer!

Pas possible avec CSS pour le moment j'en ai peur.

Votre meilleur pari est simplement d'utiliser une image (probablement un PNG) et de placer un bon texte de remplacement / titre dessus.

Alternativement, vous pouvez utiliser un SPAN ou un DIV et avoir l'image comme arrière-plan avec votre texte que vous souhaitez à des fins de référencement à l'intérieur, mais le mettre en retrait hors de l'écran.

mix-blend-mode est également une possibilité pour ce genre d'effet.

La mix-blend-modepropriété CSS définit comment le contenu d'un élément doit se fondre avec le contenu du parent de l'élément et l'arrière-plan de l'élément.

h1 {
background:white;
mix-blend-mode:screen;

/* demo purpose from here */
padding:0.25em;
mix-blend-mode:screen;
}


html {
background:url(https://i.picsum.photos/id/1069/367/267.jpg?hmac=w5sk7UQ6HGlaOVQ494mSfIe902cxlel1BfGUBpEYoRw)center / cover ;
min-height:100vh;
display:flex;
}
body {margin:auto;}
h1:hover {border:dashed 10px white;background-clip:content-box;box-shadow:inset 0 0 0 2px #fff, 0 0 0 2px #fff}

<h1>ABCDEFGHIJKLMNOPQRSTUVWXYZ</h1>