CSS div with text as mask

css, html, javascript, jquery

Solution

Based on this article for applying a text mask, you could do this with a canvas tag.

<div id="bg"><canvas id="overlay" width="240" height="70"></canvas></div>
<script>
// Get a handle to our canvas
var ctx = document.getElementById('overlay').getContext("2d");

// Choose font
ctx.font = "Bold 36px 'Helvetica'";

// Draw black rectangle
ctx.fillStyle = "black"; 
ctx.fillRect(0,0,230,70); 

// Punch out the text!
ctx.globalCompositeOperation = 'destination-out'; 
ctx.fillText("Some Text", 25, 50);
</script>

http://jsfiddle.net/6aVGU/

Problem

I am trying to achieve a mask-type effect with a coloured div's large text in HTML. I want this masked text to show parts of an image which is behind the div. However; instead of using the `background-clip` property and a `background-image` on the div itself - I am hoping to simply reveal what ever is underneath the element (in my case, the image). I have tried using svg images with compound paths, they proved too difficult to handle. Is there ANY other way I could do this? CSS? jQuery plugin?

Original source