Q: Solution: How to make a transparent Text over Image Solution : Gives CSS - Transparent Fonts. Any Letters you Want. It's from : http://lea.verou.me/2012/05/text-masking-the-standards-way/ which some editing.


/**
 * Text masking — The SVG way
 */

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

text { fill: url(#wood); }
<svg>
<defs>
 <pattern id="wood" patternUnits="userSpaceOnUse" width="240" height="300" >
  <image xlink:href="http://hd.wallpaperswide.com/thumbs/girl_beach_background-t2.jpg" width="400" height="400" />
 </pattern>
</defs>
<text y="2em">Nice Beach</text><text y="3em">Isnt't It</text>
</svg>


Code: Just change the < text.. >Change this< /text > to other words.
HTML 
<svg>
<defs>
    <pattern id="wood" patternUnits="userSpaceOnUse" width="240" height="300" >
        <image xlink:href="http://hd.wallpaperswide.com/thumbs/girl_beach_background-t2.jpg" width="400" height="400" />
    </pattern>
</defs>
<text y="2em">Nice Beach</text><text y="3em">Isnt't It</text>
</svg>

CSS:
/**
 * Text masking — The SVG way
 */

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

text { fill: url(#wood); }


A: With css. It's easy:
div {
    opacity: 0.5;
}

div p { 
    opacity: 1.0;
}

Just change div and p for whatever you need.

A: 

/**
 * Text masking — The SVG way
 */

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

text { fill: url(#wood); }
<svg>
<defs>
 <pattern id="wood" patternUnits="userSpaceOnUse" width="240" height="300" >
  <image xlink:href="http://hd.wallpaperswide.com/thumbs/girl_beach_background-t2.jpg" width="400" height="400" />
 </pattern>
</defs>
<text y="2em">Nice Beach</text><text y="3em">Isnt't It</text>
</svg>
 Run code snippet


