带有css的CrossBrowser透明文本[重复]答案

【问题标题】：CrossBrowser transparent text with css [duplicate]带有css的CrossBrowser透明文本[重复]
【发布时间】：2013-04-14 14:10:54
【问题描述】：

我有一个带有背景图像的 div，在这样的 div 内我有另一个更小且背景颜色为白色的元素。在这个元素里面我有我不想透明的文本，所以我们可以看到第一个 div 的背景图片。

尝试应用color: transparent;，但似乎不起作用。是否有可靠的 css 方法来实现这一点？

【问题讨论】：

标签： html css

【解决方案1】：

实际上这只能通过 CSS 实现。在带有白色背景的较小元素中，您可以将 CSS3 与 IE 6-8 的后备一起使用。对于后备，您可以使用透明的 PNG。

白色背景的 CSS3 代码是：

background-color: rgba(255,255,255,0.5)

我为您设置了一个代码笔，以便您查看正在运行的代码。 http://codepen.io/DheerG/pen/tkKqC

此外，如果您希望较小元素中的所有内容都是透明的，则可以使用 css opacity 元素。

opacity: 0.6;
/* IE 8 */
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=60)";
/* IE 5-7 */
filter: alpha(opacity=60);

【讨论】：

您误解了 OP 想要什么。他希望文本本身的字母从背景显示图像（文本完全透明），但文本周围的白色是纯白色（完全不透明；所以它就像字母被剪掉了）。您的解决方案只是使文本和白色褪色一些，没有达到那种效果。
既然你提到了这个问题可能是什么意思。我认为关于具有白色背景的较小元素的问题部分让我感到震惊。因此，我假设 OP 想要让父 div 透明，而不是让子 div 继承不透明度。

【解决方案2】：

你不能。执行此类操作的唯一方法是让“带文本的背景”成为您放在背景图像之上的图像。

【讨论】：