带有纯色背景的 CSS 透明文本

Question

我正在寻找一种纯 CSS 方法，用于在框（div、p 等）中创建透明文本，其中框填充了文本周围的颜色，而不是文本本身（这将是透明的 la rgba /hsla)。

想象一个 div 的样式，其中的文本颜色是 rgba .2 alpha lvl，背景颜色是纯色，而在文本中看不到背景纯色。当然，使用多个堆叠的 div/块的解决方案是可以接受的，但应该允许悬停状态，因此可以打开/关闭效果。在使用它时，可以将此 div 应用到图像或可以通过字母看到的另一个 div 的顶部。

所以！ CSS/html 的工作方式是始终将文本应用在背景之上（出于某种原因称为背景），因此，在文本颜色上使用透明颜色只会显示背景颜色。我已经尝试创建一个带有大盒子阴影的背景，以查看它是否曾经以不同的方式计算过，但事实并非如此（并且想不出另一种方法）。

与其喋喋不休地喋喋不休地用我有限的 CSS 知识，我想你明白了，所以给我你最好的！我希望它至少可以在 Chrome 和 Firefox 中运行。

Stacked Overflow 不允许我在没有附带代码的情况下放置 jsfiddle，我不想在这里放置无意义的代码只是为了链接到“起点”代码。 相反，这里有一张图片来解释这个显而易见的想法：

Answer 1

Demo Fiddle

您可以仅在 CSS 中完成此操作，但支持有限。

您可以设置-webkit-background-clip 属性，并将-webkit-text-fill-color 设置为transparent。

这仅适用于 webkit 浏览器。

例如：

div {
   color: white;  /* Fallback */
   background: url(yourimage.png) no-repeat;
   -webkit-background-clip: text;
   -webkit-text-fill-color: transparent;
}

见here for more on background-clip

background-clip CSS 属性指定一个元素是否 背景（颜色或图像）在其边框下方延伸。

如果没有背景图片，这个属性只有视觉效果 当边框具有透明区域时（由于边框样式）或 部分不透明区域；否则边界会掩盖 区别。

或者-您可以使用 SVG，per this question