텍스트를 마스크로 사용하는 CSS div

Question

HTML에서 색상이 지정된 div의 큰 텍스트로 마스크 유형 효과를 얻으려고합니다. 이 마스크 된 텍스트가 div 뒤에있는 이미지의 일부를 표시하기를 원합니다. 하나; background-clip 속성과 background-image을 div 자체에 사용하는 대신, 요소 밑에있는 것이 무엇인지 (내 경우에는 이미지) 밝히기를 바라고 있습니다. 복합 경로와 함께 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

캔버스 객체를 사용하여 할 수있는 :이 본 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"; 
    }