CSS div以文本作为掩码

Question

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

Answer 1

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

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

Answer 2

你可以使用Canvas对象来做到这一点： http://jsfiddle.net/JackKalish/g3BDa/3/

    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";
    }

Answer 3

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