是否有 -moz-mask CSS 属性，例如 -webkit-mask-image？答案

【问题标题】：Is there a -moz-mask CSS property, like -webkit-mask-image?是否有 -moz-mask CSS 属性，例如 -webkit-mask-image？
【发布时间】：2011-12-07 19:25:41
【问题描述】：

Firefox 似乎不支持 -moz-mask-image。

我正在尝试前景渐变。我不能使用图像，因为我需要选择文本。有人对 Firefox 有什么想法吗？

This version 在 chrome 和 safari 中工作

css:

-webkit-mask-image: -webkit-gradient(linear, left bottom, left top, color-stop(0.16, rgba(0,0,0,0)), color-stop(0.52, rgba(0,0,0,.5)), color-stop(0.77, rgba(0,0,0,1)));

-moz-mask: -moz-gradient(linear, left bottom, left top, color-stop(0.16, rgba(0,0,0,0)), color-stop(0.52, rgba(0,0,0,.5)), color-stop(0.77, rgba(0,0,0,1)));

【问题讨论】：

你的背景是纯色的吗？您可以在从透明到背景颜色的文本顶部放置一个伪元素。
嗨 Duopixel - 是的，我试过了，但这会导致文本无法选择。
在渐变元素中添加pointer-events: none;。
完美，感谢您的建议。
我穿越到未来宣布 Firefox 53 终于支持 mask-image。万岁！

标签： firefox css gradient mask

【解决方案1】：

根据 MDN，您可以在 Firefox 中使用 mask，从 Firefox 3.5 开始：

https://developer.mozilla.org/en/CSS/mask

但是，mask 需要 SVG 图像作为遮罩。您可能可以base-64 encode your SVG image into your stylesheet，或者您可以使用 SVG 图像文件。

【讨论】：

除非你不能和gradient一起使用，你必须use SVG instead。