以文本爲掩碼的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

你可以用透明的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"; 
    }