jquery - 有没有办法制作穿孔文本？

Question

我想在 div 上放置一个背景图像，并在其上放置一个穿孔文本(即穿孔文本的边框将为白色)。

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

由于我的文本是动态的(不能将每个单词都制作成 .PNG)，有没有办法在 jquery/css 中做到这一点？或者唯一的解决方案是 SVG/Canvas？

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

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

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

<h1>Hey Dude</h1>