Идея заключается в применении текста (шрифта) в качестве маски слоя на изображение. Достижение подобного эффекта, используя только 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;
}