javascript - CSS div with text as mask -


i trying achieve mask-type effect coloured div's large text in html. want masked text show parts of image behind div. however; instead of using background-clip property , background-image on div - hoping reveal ever underneath element (in case, image). have tried using svg images compound paths, proved difficult handle. there other way this? css? jquery plugin? a not-so-successful attempt svg

based on this article applying text mask, canvas tag.

<div id="bg"><canvas id="overlay" width="240" height="70"></canvas></div> <script> // handle 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 text! ctx.globalcompositeoperation = 'destination-out';  ctx.filltext("some text", 25, 50); </script> 

http://jsfiddle.net/6avgu/


Comments

Popular posts from this blog

python - Subclassed QStyledItemDelegate ignores Stylesheet -

java - HttpClient 3.1 Connection pooling vs HttpClient 4.3.2 -

SQL: Divide the sum of values in one table with the count of rows in another -