-moz-background-clip:text; 在Mozilla更新

Question

之前的几篇文章似乎表明-moz-background-clip: text在Mozilla中没有. -moz-background-clip:*文本*在Mozilla中

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

这是我的网站,文字在Firefox中显然很糟糕但在Chrome中很好

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

Answer 1

是的,虽然background-clip是有效的CSS3属性,但text非标准值.因此没有其他浏览器支持它,并且您不需要其他前缀.

您看到的问题是此功能不会优雅地回退.不支持它的浏览器将显示整个元素的背景.

要避免这种情况,您需要隐藏其他浏览器的背景.执行此操作的最佳方法是使用webkit前缀.WebKit不支持该background属性,但它适用于CSS渐变.因此,您可以指定透明渐变,然后通过利用多个背景图像指定背景图像:

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

这里的主要问题是Opera -webkit-出于兼容性原因支持此前缀.所以你只需要在之后指定-o-渐变来取消它:

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

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

 color: transparent;

看到这个小提琴,看看它在行动:

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

另外,您可以删除z-index,因为这仅适用于定位(或非完全不透明)元素.当你没有设置过opacity或者position比其他static的::after,这将不适用.