有没有办法制作打孔的文字？

Question

I'd like to put a background image on a div, and place a perfored text over it (ie the border of the perfored text will be white).

So I can see the image only across the text.

Since my text is dynamic (can't make .PNG of every word) is there a way to do this in jquery/css? Or the only solution is SVG/Canvas?

Where could I start to do such a task? It must be cross-browser (at least) for some major release (I don't mind of IE7 for example).

-webkit-text-fill-color works only on chrome...

Answer 1

Are you trying to achieve something like this?

 h1 { color: white; /* Fallback: assume this color ON TOP of image */ background: url("http://lorempixel.com/400/400") no-repeat; -webkit-background-clip: text; -webkit-text-fill-color: transparent; font-family: Impact; } .backgroundclip h1 { background: url("http://lorempixel.com/400/400") 0 0 no-repeat; -webkit-background-clip: text; -webkit-text-fill-color: transparent; } h1 { color: orangered; text-shadow: 0px 0px 2px 2px #fff; } .android .gradient-text { color: white; background: none; -webkit-text-fill-color: white; -webkit-background-clip: border-box; } .gradient-text { background: -webkit-linear-gradient(gray, black); -webkit-background-clip: text; -webkit-text-fill-color: transparent; } 

 <h1>Hey Dude</h1> 

Answer 2

Something like this? The fill none, stroke white gives you the white border and the clipped image, the background.

 <svg width="100%" height="100%" viewBox="0 0 480 360"> <defs> <clipPath id="sample" clipPathUnits="userSpaceOnUse"> <text x="45" y="120" font-size="100">Clip Test</text> </clipPath> </defs> <rect width="100%" height="100%" fill="black">Clip Test</rect> <image xlink:href="http://www.w3.org/Graphics/SVG/Test/20110816/images/bluesquidj.png" preserveAspectRatio="none" x="20" y="20" width="410" height="160" clip-path="url(#sample)"/> <text x="45" y="120" font-size="100" fill="none" stroke="white" stroke-width="2">Clip Test</text> </svg>