css – Blending background text only

Question:

There is a text. We need to overlay it with a background so that it is only on the text. That is, everything that was not text was transparent. I'm thinking of using svg to overlay a picture on a text, but I don't know how to make everything transparent, except for letters. The difficulty is that each letter should not have different pictures, but one whole

Answer:

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>
Post Views: 0
Scroll to Top