Наложение background только на текст

284

26 июля 2017, 21:59

Есть текст. На него надо наложить background так, чтобы он был только на тексте. То есть все, что не текст, было прозразным. Думаю через svg сделать наложение картинки на текст, но не знаю, как сделать все прозразным, кроме букв. Сложность в том, что на каждой букве должны быть не разные картинки, а одна цельная

Answer 1

svg { 
  width: 6em; 
  height: 1.5em; 
  font: 900 500%/1.2 'Arial Black', sans-serif; 
} 
 
text { 
  fill: url(#sea); 
}

<svg> 
  <defs> 
    <pattern id="sea" patternUnits="userSpaceOnUse" width="544" height="340" > 
      <image xlink:href="http://i01.i.aliimg.com/wsphoto/v0/32244527293/F0050-24inch-x38-inch-Underwater-World-Coral-Sharks-Turtle-Moray-Eel-Fish-Poster-on-Waterproof-Canvas.jpg" width="544" height="340" /> 
    </pattern> 
  </defs> 
  <text y="1.2em">Ваш текст!!!</text> 
</svg>

Answer 2

Обратите внимание на проблему кроссбраузерности.

* { 
margin: 0; 
padding: 0; 
} 
div { 
  font: 900 normal 450%/100vh sans-serif; 
  text-transform: uppercase; 
  text-align: center; 
  background-image: url(https://i.ytimg.com/vi/ErH--ucLM1M/maxresdefault.jpg); 
  background-size: cover; 
  background-clip: text; 
  -webkit-text-fill-color: transparent; 
}