Question

上一篇文章似乎表明Mozilla中没有-moz-background-clip: text。 -moz-background-clip: *text* in 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，因此不适用。

Answer 2

解决方案here有一些不同的方法，您可以使用这些方法隐藏FF和其他浏览器的特定CSS属性。虽然有点凌乱/ hacky。

你可以保持CSS相同，只需添加

@-moz-document url-prefix() {
.css:after, .hoo:after, .prof:after{ display: none; }
}

删除背景图案。

使用原始帖子答案推荐的SVG，可以更加优雅地说明跨浏览器的文本背景。

Answer 3

CSS-Tricks文章＆＃34; Show Image Under Text (with Acceptable Fallback)＆＃34;提出了一个很好的解有了它，enemy.sqrMoveY样式元素在其他浏览器中看起来很好（纯色背景上的纯文本）。

基本上，他们使用Modernizr来检测浏览器是否支持-webkit-background-clip:text，并且仅在应用时才应用-webkit-background-clip:text。 Modernizr必须通过自定义测试进行扩展，以实现这一目标：

<script src="modernizr-1.6.min.js"></script>
<script>
  Modernizr.addTest('backgroundclip',function() {

    var div = document.createElement('div');

    if ('backgroundClip' in div.style)
      return true;

    'Webkit Moz O ms Khtml'.replace(/([A-Za-z]*)/g,function(val) { 
      if (val+'BackgroundClip' in div.style) return true;
    });

  });
</script>

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

3 个答案: