Is there a way to make a perfored text?

Question

I'd like to put a background image on a div, and place a perfored text over it (i.e. 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...

Why do you mean by *perfored* text? That only the letter border is colored and the inner color should be transparent? Have a look at [this](http://stackoverflow.com/questions/2570972/css-font-border) question. — D4V1D, Aug 27 '15 at 09:47
http://www.webdesignerdepot.com/2014/12/3-tricks-for-adding-texture-to-your-text-with-css-and-svg/ — BENARD Patrick, Aug 27 '15 at 09:51
http://thenewcode.com/1032/Easy-Cross-Browser-Text-Clipping-Masks-with-Blend-Modes it seems that this trick works in Firefox too, but not in IE(11). So, SVG is probably only cross-browser solution... — sinisake, Aug 27 '15 at 10:07

score 3 · Answer 1 · answered Aug 27 '15 at 09:49

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>

You might want to mention that support for the properties used here is pretty poor..it's basically Chrome I think. — Paulie_D, Aug 27 '15 at 12:12

score 0 · Answer 2 · answered Aug 27 '15 at 10:32

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>

Is there a way to make a perfored text?

2 Answers2