CSS：渐变文本颜色？ [英] CSS: Gradient text colour?

问题描述

我试图得到一些文本有渐变色，但我没有一个线索如何。我想这样得到：

I'm trying to get some text to have a gradient colour, but I haven't a clue how. I'm trying to get it like this:

我尝试的唯一的事情是 -webkit-mask ，但我不能得到工作如何我想要它。另一件事是 -webkit-gradient 在颜色属性 - 是可能吗？

The only thing I have tried is -webkit-mask, but I couldn't get that working how I wanted it to. The other thing would be -webkit-gradient in the color property - is that possible?

跨浏览器兼容性相当重要，但不是世界末日。我宁愿文本在IE中是一个纯色，而不是将整个东西转换成一个图像（有相当多的文本，像这样，其中一些是动态的）。

Cross browser compatibility is fairly important, but not the end of the world. I'd prefer the text to be a solid colour in IE than to convert the entire thing into an image (there is quite a bit of text like this, some of it dynamic).

推荐答案

对于基于webkit的浏览器（Chrome和Safari）：

For webkit based browsers (Chrome & Safari) :

.text {
  font-size: 20px;
  background: -webkit-gradient(linear, left top, left bottom, from(#fff), to(#111));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

其他：

http：/ /www.webdesignerwall.com/demo/css-gradient-text/

这篇关于CSS：渐变文本颜色？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！