在文本中包裹图像/图案

Question

我正在尝试在HTML / CSS中实现此效果。

我知道渐变有效，但这种精确的模式无法用渐变创建。

有没有人有一些解决方案，或者这根本不可能创建inHTML / CSS？ 在不得已的情况下，我将不幸地使用图像。

谢谢

Answer 1

This blog post介绍了如何通过不支持它的浏览器的优雅回退来实现这一目标。这是在支持webkit的浏览器上实现它的CSS。

h1 {
   color: fallbackColor;
   background: url(path/to/image.jpg) no-repeat;
   -webkit-background-clip: text;
   -webkit-text-fill-color: transparent;
}