以文本为掩码的 CSS div

Question

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?

Answer 1

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/

Answer 2

You could do it using the Canvas object: 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 图像来执行此操作。