跨浏览器透明字母答案

【问题标题】：Cross-Browser Transparent Letters跨浏览器透明字母
【发布时间】：2013-05-26 10:12:39
【问题描述】：

我正在创建一个博客，博客的顶部是一些场景的图像（我使用了纽约市的图片），其顶部是最新博客文章的文字。我认为让字母有轮廓会很酷，但仍然可以是透明的，因此观众仍然可以看到图像。

我尝试了透明颜色的文本阴影，但我得到的只是一个黑色字母（我没想到但很有意义）。我最终使用了 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);}

谢谢。

【问题讨论】：

标签： css google-chrome firefox cross-browser

【解决方案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/

【讨论】：

不完全是我想要的，但我可以使用它。谢谢大卫！
这是要走的路，但是我会使用 CSSTRICKS“真正”的跨浏览器不透明度属性css-tricks.com/snippets/css/cross-browser-opacity
感谢@AdrienBe，该代码对我来说也更好看。在我的答案中添加了一个链接

【解决方案2】：

[我这里没有真正的现成解决方案；但是我对此的想法太长了，无法发表评论，所以请原谅我把它放在这里。]

很难实现跨浏览器。我也研究了获得这种效果的方法（并且对仅使用 webkit 不满意），我想出了一些东西，比如使用动态创建的 Canvas 或 SVG 图像来绘制文本和然后操作 alpha 值（画布）或应用蒙版/滤镜效果（SVG）。

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

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

但是对于像这样的小效果，它需要做很多工作......所以我最终决定放弃它，并推迟使用“透明字母”，直到浏览器支持更简单的解决方案，比如你提到的 webkit 变得更广泛.

【讨论】：