Texte transparent découpé dans l'arrière-plan

Question

Y a-t-il un moyen de faire un texte transparent découpé dans un fond effet comme celui de l'image suivante, avec CSS ?
Il serait triste de perdre tout le précieux référencement à cause des images qui remplacent le texte.

J'ai d'abord pensé à des ombres mais je n'arrive pas à comprendre...

L'image est le fond du site, elle est positionnée de manière absolue. <img> étiquette

Answer 1

C'est possible avec css3 mais ce n'est pas supporté par tous les navigateurs.

Avec background-clip : text ; vous pouvez utiliser un fond pour le texte, mais vous devrez l'aligner sur 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;
}

<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/

Answer 2

Bien que cela soit possible avec CSS, une meilleure approche consisterait à utiliser un fichier de type SVG en ligne con Masquage SVG . Cette approche présente certains avantages par rapport à CSS :

• Much meilleur support pour les navigateurs : IE10+, chrome, Firefox, safari...
• Cela n'a pas d'incidence sur le référencement, car les araignées peuvent explorer le contenu SVG ( google indexe les contenus SVG depuis 2010 )

Démonstration du 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 que le texte soit sélectionnable et consultable, vous devez l'inclure en dehors de la zone de texte. <defs> tag. L'exemple suivant montre une façon de le faire en conservant le texte transparent avec la balise <use> étiquette :

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>

Answer 3

Il existe un moyen simple d'y parvenir avec une simple CSS :

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

pour un texte transparent sur un fond noir, ou

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

pour un texte transparent sur un fond blanc.

Placez ces styles sur votre élément de texte avec l'arrière-plan que vous voulez derrière lui.

Exemple CodePen

Lire la suite en mix-blend-mode et faites des expériences pour utiliser différentes couleurs.

Mises en garde :

1. Pour que cela fonctionne dans chrome, vous devez également définir explicitement une couleur d'arrière-plan dans l'écran de l'utilisateur. html élément.
2. Cela fonctionne sur pratiquement tous les navigateurs modernes sauf IE .

Answer 4

Il est possible, mais jusqu'à présent uniquement avec les navigateurs basés sur Webkit (Chrome, Safari, Rockmelt, tout ce qui est basé sur le projet Chromium).

L'astuce est d'avoir un élément à l'intérieur de l'élément blanc qui a le même arrière-plan que le corps, puis d'utiliser la fonction -webkit- background-clip: text; sur l'élément interne, ce qui signifie essentiellement "ne pas étendre l'arrière-plan au-delà du texte" et 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/

Answer 5

Mettez juste 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;

    }