css - 跨浏览器透明字母

Question

我正在创建一个博客，在博客的顶部是一些场景的图像(我使用了纽约市的照片)，最近的博客文章的文本在它的顶部。我觉得让字母有轮廓会很酷，但仍然可以是透明的，这样观众仍然可以看到图像。

我尝试使用透明颜色的文本阴影，但我得到的只是一个黑色字母(我没想到但有道理)。我最终使用了 webkit-text-stroke 属性，它根本不是跨浏览器的。我在 Chrome 和 Firefox 中附上了它的图像，它后面有一个文本阴影，这样您就可以看到文本阴影在没有颜色的情况下是如何(有点)出现的。

有没有办法在现代浏览器中产生预期的效果(文本周围有边框，但没有颜色)？对于 IE9 及以下版本，我将只使用纯黑色。

这是我用来获得以下效果的代码:

figcaption { 
    position: absolute; 
    bottom: 0px; 
    left: 20px; 
    font-size: 90px; 
    color: transparent;
    -webkit-text-stroke-width: 5px;
    -webkit-text-stroke-color: #1F1F1F; 
    text-shadow: 1px 1px 5px rgba(255, 255, 255, 0.5);}

谢谢。

Answer 1

几个想法。

此示例与您所描述的不完全相同，但结果很好，应该可以跨浏览器正常运行:
http://jsfiddle.net/panchroma/JHvgp/

关键的CSS是

h1.figcaption { 
color:white;
position: absolute; 
bottom: 0px; 
left: 20px; 
font-size: 90px; 
opacity: 0.35;
filter: alpha(opacity=35);
text-shadow: 2px 2px 2px #000;
}

或者，也许可以用 sIFR 做一些事情...虽然不确定。

祝你好运!

编辑

来自 Adrien Be 的好建议下面——改进的跨浏览器透明度代码:
http://css-tricks.com/snippets/css/cross-browser-opacity/