javascript - 以文本作为掩码的 CSS div

Question

我正在尝试使用 HTML 中彩色 div 的大文本实现 mask 式效果。我希望这个蒙面文本显示 div 后面的图像部分。然而;而不是在 div 本身上使用 background-clip 属性和 background-image - 我希望简单地揭示元素下面的内容(在我的例子中，图像)。 我曾尝试使用带有复合路径的 svg 图像，但事实证明它们太难处理了。 我还有其他方法可以做到这一点吗？ CSS？ jQuery 插件？

Answer 1

基于 this article for applying a text mask ，您可以使用 Canvas 标签执行此操作。

<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/