CSS div с текстом в виде маски

Question

Я пытаюсь добиться эффекта маскирования с большим текстом цветного div в HTML. Я хочу, чтобы этот замаскированный текст показывал части изображения, которые находятся за div. Однако; вместо использования свойства background-clip и background-image на самом div. Я надеюсь просто показать, что когда-либо находится под элементом (в моем случае, изображение). Я попытался использовать 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/

Answer 2

Вы можете сделать это с помощью прозрачного PNG-изображения текста.

Answer 3

Вы можете сделать это с помощью объекта 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"; 
    }