跨浏览器透明字母

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

[我这里没有真正的现成解决方案;但是我对此的看法对于评论来说太长了，所以请原谅我把它放在这里。]

---

跨浏览器有点难以实现。我已经研究过如何获得这种效果（并且不满足于只使用webkit），我想出了一些东西，比如使用动态创建的Canvas或SVG图像来绘制文本和然后操纵alpha值（画布）或应用遮罩/滤镜效果（SVG）。

但是让字体渲染/定位完全正确是一个挑战，当文本必须流过多行时，它会变得更加复杂。我找到的最佳方法是将文本拆分为多个span元素，每个单词一个;然后我将包含该单词的Canvas或SVG图像作为span元素的背景图像放置。这里有一大优势：浏览器仍然处理文本流，比如将文本分成新行等，因为在Canvas或SVG中实现自己有点麻烦。如果文本以更改大小显示的区域（例如，用户调整浏览器窗口大小），文本流也会自动调整。需要额外注意的是在应用效果后处理文本大小调整 - 当用户在浏览器中更改字体大小时，我在图像上绘制的文本可能不再适合 - 尽管使用可以自动处理的SVG和相对单位同样。其他解决方法是使用background-size将背景图像缩放到包含单词的跨度的大小，或以某种方式捕获调整大小 - “事件”并动态地重新绘制图像。

使用背景图片的优势在于我仍然可以保留原始HTML文本 - 只需将其设置为transparent，这样当用户f.e.开始在页面上选择文本，它仍将显示为实际文本，并且是复制和粘贴功能。

---

但是对于这样的小效果来说，这是相当多的工作......所以我最终决定放弃它，并推迟使用“透明字母”，直到浏览器支持更容易的解决方案，如你提到的webkit更广泛

Answer 2

有几点想法。

这个例子并不完全是你所描述的，但结果很好，应该可以跨浏览器工作：
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/