Firefox 中的 css 插入文本背景颜色

Question

我想用 CSS 创建一个插入文本。它在 Chrome 和 safari 上运行良好，但在 firefox 和 IE 上也不起作用，我尝试了无数种可能性，但它仍然不起作用:-/你能帮我解决这个问题吗？

CSS:

text-align: center;
line-height: 60px;
font-size: 60px;

background-color: #112151;
-moz-background-color: #112151;
-webkit-background-color: #112151;
color: transparent;
text-shadow: 0px 2px 3px rgba(255,255,255,0.5);
-moz-text-shadow: 0px 2px 3px rgba(255,255,255,0.5);
-webkit-background-clip: text;
-moz-background-clip: text;
background-clip: text;

如何在 firefox 上实现相同的设计？看起来背景颜色和文本的透明颜色有问题，但我似乎无法弄清楚它们如何在 mozilla 和 IE 上协同工作。

Answer 1

我做了一个 jsfiddle 的小例子。创建这种阴影的技巧是在文本上方和下方添加文本阴影(两者都在后面，但它们向上或向下移动)。

http://jsfiddle.net/mine/ru6pc/

它似乎适用于 Firefox，但我猜你会遇到 IE 问题。 IE < 10 还不支持 CSS-text-shadow，所以您可以看看 pie-CSS(我不知道，如果他们支持它，但可能值得一看)。

.inset {
    font-family: Arial;
    font-weight: bold;
    font-size: 20pt;
    color: #4e830f;
    text-shadow: 0px -1px 2px rgba(0, 0, 0, 0.75),
                 0px 1px 2px rgba(255, 255, 255, 0.75);    
}