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

你需要为-moz和-o（simone评论）

添加相同的内容

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

修改
不幸的是，以前的海报是对的 -moz-background-clip:text does not work in Firefox

Answer 2

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

Answer 3

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

Text Gradient Chrome Only Issue

3 个答案: