html - 带有 css 的 CrossBrowser 透明文本

Question

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

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

Answer 1

你不能。做这样的事情的唯一方法是让“带文本的背景”成为您放在背景图像顶部的图像。

Answer 2

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

白色 bg 的 CSS3 代码将是：

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

我为您设置了一个 codepen 以查看运行中的代码。 http://codepen.io/DheerG/pen/tkkqC

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

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