css – Blending background text only


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


svg {
  width: 6em;
  height: 1.5em;
  font: 900 500%/1.2 'Arial Black', sans-serif;

text {
  fill: url(#sea);
    <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" />
  <text y="1.2em">Ваш текст!!!</text>
Scroll to Top