1

之前的几篇文章似乎表明-moz-background-clip: text在 Mozilla 中不可用。 -moz-background-clip：Mozilla 中的 *text*

是否可以从 Firefox 和其他浏览器中隐藏看似专有的仅 WebKit 的 CSS 功能？我想隐藏伪“之后”规则，该规则将文本内容添加到页面以达到 Firefox 和 IE 等所需的效果。

这是我的网站，文本在 Firefox 中明显呈现不佳，但在 Chrome 中很好

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

4

3 回答 3

6

是的，虽然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，这将不适用。positionstatic::after

于 2013-06-20T22:22:15.073 回答
0

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

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

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

删除背景图案。

使用原始帖子答案推荐的 SVG，将是一种更优雅的方式来说明跨浏览器的文本背景。

于 2013-06-20T22:21:16.183 回答
0

CSS-Tricks 文章“在文本下显示图像（带有可接受的后备） ”提供了一个很好的解决方案。有了它，-webkit-background-clip:text样式元素在其他浏览器中看起来还不错（纯色背景上的纯色文本）。

本质上，他们使用Modernizr来检测浏览器是否支持-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>
于 2015-10-17T15:49:54.980 回答