Фон текста с изображением

Идея заключается в применении текста (шрифта) в качестве маски слоя на изображение. Достижение подобного эффекта, используя только HTML (таким образом, кросс-браузерный без использования Flash / Silverlight …) не удалось, но теперь с SVG это можно сделать очень легко. Это решение прекрасно и просто, чтобы получить желаемый эффект, нужно поместить объект SVG (содержащие текст маску) на изображении. Объекты SVG могут быть размещены непосредственно на изображении (с использованием Z-индекс), или внутри DIV, содержащего изображение в его фоне.
Вот конечный результат с изображением в качестве фона текста:

SVG текст здесь имеет контур толщиной  5px и 100% прозрачность, а заливка текста имеет значение прозрачности 50%.

HTML код:

<div id="bkDiv">
  <svg width="100%" height="100%">
    <defs>
      <mask id="theMask">
        <rect width="100%" height="100%" fill="#fff" />
        <text x="0" y="120" id="theText" fill="#000">Codicode</text>
      </mask>
    </defs>
    <rect width="100%" height="100%" mask="url(#theMask)" fill="#000" />
  </svg>
</div>

Css код:

#bkDiv
{
  background-image : url('my_image.jpg');
  height:130px;
  width:550px;
}

#theText
{
  font-size:140px;
  font-family:impact;
  stroke:#000;
  stroke-width:5px;
  fill-opacity:0.5;
}

Оригинал / Перевод