跨浏览器透明文本的CSS实现

Question

我手头有一个带有背景图片的div，而在这个div中还有另一个更小的元素，其背景色为白色。在这个元素内部，我希望文本是透明的，以便我们可以看到第一个div的背景图片。

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

- Ilja

---

这个链接可能会帮助你使用SVG找到可行的解决方案。 - ScottS

Answer 1

实际上，这可以仅通过CSS实现。在具有白色背景的较小元素中，您可以使用CSS3，并为IE 6-8提供回退。对于回退，您可以使用透明PNG。

白色背景的CSS3代码如下：

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

我为你设置了一个CodePen，让你可以看到代码的实际效果。 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);

- Dheer

---

你误解了原帖作者的意愿。他想要文本本身的字母显示背景图片（文本应该是完全透明的），但是文本周围的白色应该是纯实心白色（完全不透明；这样看起来就像字母被切下来一样）。你的解决方案只是使得文本和白色有些褪色，而没有达到那种效果。 - ScottS

既然你提到了，那个问题可能就是这个意思。关于白色背景下较小元素的部分让我有些困惑。因此，我认为 OP 想要父 div 透明而不是子元素继承不透明度。 - Dheer

Answer 2

不行。唯一的方法是将“去除文本的背景”作为图像放在背景图像上。

- Niet the Dark Absol

---

JavaScript怎么样？用它可以实现吗？ - Ilja

不行。除非使用画布，但这在IE8或更早的版本中无法工作。 - Niet the Dark Absol

好的，谢谢你提供信息，这真是令人失望。一旦我能够，我会授予你一个答案。 - Ilja