使用css的CrossBrowser透明文本

Question

我有一个带有背景图像的div，在这样的div中我有另一个更小的元素，它的背景颜色是白色。在这个元素中，我希望文本不是透明的，这样我们就可以看到第一个div的背景图像。

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

Answer 1

你不能这样做，唯一这样做的方法是让“带文本的背景”成为你放在背景图像上的图像。

Answer 2

实际上，只有使用CSS才能做到这一点。在白色背景的较小元素中，您可以使用带有IE 6-8回退的CSS3。对于回退，您可以使用透明的PNG。

白色bg的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);