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

#css #css3 #вёрстка #svg

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

Ответы

Ответ 1

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

text {
  fill: url(#sea);
}



Ответ 2

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



* {
  margin: 0;
  padding: 0;
}

div {
  font: 900 normal 450%/100vh sans-serif;
  text-transform: uppercase;
  text-align: center;
  background-image: url("https://i.stack.imgur.com/zN1F6.jpg");
  background-size: cover;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
Lorem ipsum