-moz-background-clip：text;在Mozilla更新 [英] -moz-background-clip: text; in Mozilla update

问题描述

上一篇文章似乎表明 -moz-background-clip：text 在Mozilla中不可用。
-moz-background-clip：* text * in Mozilla

A couple of previous post seems to indicate that -moz-background-clip: text is not available in Mozilla. -moz-background-clip: *text* in Mozilla

是否有可能隐藏什么似乎只是一个专有的WebKit CSS功能从Firefox和其他浏览器？我想隐藏伪后规则，它添加文本内容到页面以实现从Firefox和IE等所需的效果。

Is it possible to hide what appears to be a proprietary WebKit only CSS feature from Firefox and other browsers? I would like to hide the pseudo "after" rule which adds text content to the page to achieve the desired effect from Firefox and IE, etc.

这里是我的网站，文字在Firefox中显示效果很差，但在Chrome中却很差。

Here is my site, the text clearly renders badly in Firefox but fine in Chrome

http://sandpit.jonathanbeech.co.uk/

推荐答案

是，而 background-clip 是一个有效的CSS3属性， text 值在非标准。因此，没有其他浏览器支持它，并且您不需要其他前缀。

Yes, while background-clip is a valid CSS3 property, the text value in non-standard. As such no other browser supports it, and you do not need the other prefixes.

您看到的问题是，此功能不能正常回退。不支持它的浏览器将显示整个元素的背景。

The problem you are seeing is that this feature does not fallback gracefully. Browsers that do not support it will show the background for the entire element.

为了避免这种情况，你需要隐藏其他浏览器的背景。最好的方法是使用webkit前缀。 WebKit不支持背景属性，但它适用于CSS渐变。因此，您可以指定透明渐变，然后通过利用多个背景图片来指定背景图片：

To avoid this you need to hide the background from other browsers. The best way to do this is to use a webkit prefix. WebKit does not support this for the background property, but it does for CSS gradients. Thus you can specify a transparent gradient, and then specify your background image, by taking advantage of multiple background images:

 background: -webkit-linear-gradient(transparent, transparent), url("http://sandpit.jonathanbeech.co.uk/wp-content/themes/jontheme/images/crosshatch.png") transparent;

这里的主要问题是Opera支持这个 -webkit - 前缀。所以你只需要指定一个-o-渐变来取消它：

The main problem here is that Opera supports this -webkit- prefix for compatibility reasons. So you just need to specify a -o- gradient afterwards to cancel that out:

 background-image: -o-linear-gradient(transparent, transparent);

然后，您需要使文本透明，以便其他浏览器看不到它：

You then need to make the text transparent, so that other browsers do not see it:

 color: transparent;

看到这个小提琴，看看它在行动：

See this fiddle to see it in action:

http://jsfiddle.net/dstorey/2dhNM/

另外，您可以删除 z-index ，因为这只适用于定位（或不完全不透明）的元素。由于您未设置除静态 opacity 或位置 c>在 :: after 后，这将不适用。

As an aside, you can remove the z-index, as this only works on positioned (or not fully opaque) elements. As you've not set opacity or a position other than static on the ::after, this will not apply.

这篇关于-moz-background-clip：text;在Mozilla更新的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！