CSS透明文本与固体背景周围的文本

Question

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

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

SO！ CSS / html的工作方式是文本始终应用于背景（由于某种原因称为背景），因此，使用文本颜色上的透明颜色除了显示背景的颜色之外什么都不做。我尝试创建一个带有大框阴影的背景，以便查看它是否以不同的方式计算，并且它不是（并且无法想到其他方法）。

我没有用我有限的CSS知识喋喋不休，我认为你明白了，所以尽我所能！我希望至少在Chrome和Firefox中使用它。

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

Answer 1

Demo Fiddle

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

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

但这只适用于webkit浏览器。

e.g：

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