css - 仅文本渐变 Chrome 问题

Question

CSS

    h1 {
      font-size: 72px;
      background: -webkit-linear-gradient(#eee, #333);
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
    }

HTML

<h1>Hello World</h1>

我在 chrome 浏览器中看到带有渐变的“Hello World”文本。即使我添加了其他前缀，例如 -moz,-mo 我在 firefox、opera 或 IE 中看不到它。可能是什么问题？

Answer 1

尝试这个

    background: $gradient;
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    display: inline-block;

为我在所有浏览器上工作:)

Answer 2

您需要为 -moz 和 -o(simone comment) 添加相同的内容

在这里你可以找到一个线性梯度的例子。
http://www.the-art-of-web.com/css/linear-gradients/#.UNQ9Ztd2EuM

编辑
不幸的是，以前的海报是正确的
-moz-background-clip:text 在 Firefox 中不起作用

Answer 3

不幸的是，我认为只有基于 WebKit 的浏览器实现了 text-fill-color 属性。据我所知，Mozilla 还没有解决方法。

Answer 4

检查这个。这是一个很棒的渐变网站。您可以同时为任何浏览器制作任何渐变，并且它还支持旧版本的ie。