有没有办法制作穿孔文本？答案

【问题标题】：Is there a way to make a perfored text?有没有办法制作穿孔文本？
【发布时间】：2015-11-21 15:07:22
【问题描述】：

我想在 div 上放置一个背景图片，并在其上放置一个打孔文本（即打孔文本的边框将是白色的）。

所以我只能在文本中看到图像。

由于我的文本是动态的（不能为每个单词制作 .PNG），有没有办法在 jquery/css 中做到这一点？还是唯一的解决方案是 SVG/Canvas？

我可以从哪里开始做这样的任务？对于某些主要版本（例如，我不介意 IE7），它必须是跨浏览器（至少）。

-webkit-text-fill-color 仅适用于 chrome...

【问题讨论】：

为什么要说 perfored 文本？只有字母边框是彩色的，内部颜色应该是透明的？看看this的问题。
webdesignerdepot.com/2014/12/…
thenewcode.com/1032/… 似乎这个技巧也适用于 Firefox，但不适用于 IE(11)。所以，SVG 可能只是跨浏览器的解决方案……

标签： jquery html css canvas svg

【解决方案1】：

您是否正在尝试实现这样的目标？

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;
}

&lt;h1&gt;Hey Dude&lt;/h1&gt;

【讨论】：

你可能想提一下，对这里使用的属性的支持很差......我认为它基本上是 Chrome。

【解决方案2】：

这样的？填充无，描边白色为您提供白色边框和剪切的图像，背景。

<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>

【讨论】：