Javascript 以文本作为掩码的CSS div

我正在尝试用HTML中彩色div的大文本实现掩码类型效果。我希望这个蒙面文本显示div后面的部分图像；我不想在div本身上使用

background clip

属性和

background image

，而是希望简单地揭示元素下面的内容（在我的例子中是图像）。 我曾经尝试过使用svg图像和复合路径，结果证明它们太难处理了。 我还有别的办法吗？CSS？jQuery插件？

---

您可以使用文本的透明PNG图像执行此操作。

基于，您可以使用画布标记执行此操作

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

//抓住我们的画布
var ctx=document.getElementById（'overlay'）.getContext（“2d”）；
//选择字体
ctx.font=“Bold 36px‘Helvetica’”；
//绘制黑色矩形
ctx.fillStyle=“黑色”；
ctx.fillRect（0,0230,70）；
//把课文打出来！
ctx.globalCompositeOperation='destination out'；
ctx.fillText（“一些文本”，25,50）；

---

您可以使用画布对象执行此操作：

---

我看到了这一点，很有帮助，但不是我想要的。我需要文本来简单地揭示它下面的内容。不希望给出背景图像。否则它下面会有图像吗？div在图像上方浮动，我不使用背景图像的原因是我将对其进行动画处理-这将使事情更加复杂。@grevin根据您将如何使用它，可能会有解决方法或黑客，但是，目前为止，只有您提供的信息，没有解决方案。我想如果找不到其他任何东西，我会这样做-但我希望有一个解决方案可以让我轻松编辑文本：）谢谢。这看起来很有希望，谢谢！有没有可能在画布上动画那个黑匣子的高度？请考虑使用D3，最好的JavaScript图形库，谢谢！这看起来也和我希望的一样：）

    var canvas1 = document.getElementById("canvas1");
    var canvasContext1 = canvas1.getContext("2d");

    // destination-out 
    // Text cuts-out everything under it
    // background is revealed in the cut-out
    makeGradientAndFont(canvasContext1, canvas1);
    canvasContext1.globalCompositeOperation = 'destination-out';
    canvasContext1.fillText("Portfolio", 175, 50);

    function makeGradientAndFont(ctx, canvas) {
        var grad = ctx.createLinearGradient(0, 0, canvas.width, canvas.height);
        grad.addColorStop(0, '#0000FF');
        grad.addColorStop(.3, '#00FFFF');
        grad.addColorStop(.4, '#99FFFF');
        grad.addColorStop(.5, '#00FF00');
        grad.addColorStop(.6, '#FFFF00');
        grad.addColorStop(.8, '#F00000');
        ctx.rect(0, 0, canvas.width, canvas.height);
        ctx.fillStyle = grad;
        ctx.fill();
        ctx.fillStyle = "black";
        ctx.font = "55px Arial";
        ctx.textAlign = "center";
        ctx.textBaseline = "middle";
    }