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

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

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

与其用我有限的 CSS 知识喋喋不休，我想你明白了，所以请尽力而为!我希望它至少能在 Chrome 和 Firefox 中运行。

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

请您参考如下方法:

Demo Fiddle

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

您可以设置 -webkit-background-clip属性(property)，和-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

The background-clip CSS property specifies whether an element's background, either the color or image, extends underneath its border.

If there is no background image, this property has only visual effect when the border has transparent regions (because of border-style) or partially opaque regions; otherwise the border covers up the difference.

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