CSS是否可以使文本颜色在两种颜色之间淡入淡出？

Question

我希望能够在以下设计中实现相应效果。

不使用图片也可以实现吗？

fiddle: https://jsfiddle.net/8k66bwbk/

.blue-fade
{
    font-size: 40px;
    font-family: Helvetica,Arial,sans-serif;
    font-weight: 100;  
    color: #1ba0d7;
}

- Subpar Web Dev

Answer 1

你是否希望得到类似的东西？

.blue-fade {
  font-size: 40px;
  font-family: Helvetica,Arial,sans-serif;
  font-weight: 100; 
  background: -webkit-linear-gradient(#1ba0d7, #002d3f);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

<p class="blue-fade">
368%
</p>

https://jsfiddle.net/9dx4fcrz/

- XsMeJkY

Answer 2

您也可以通过不透明度来改变淡入淡出效果。下面是一个带有悬停效果的示例。

.blue-fade
{
    font-size: 40px;
    font-family: Helvetica,Arial,sans-serif;
    font-weight: 100;  
    color: #1ba0d7;   
}

.blue-fade:hover {
   opacity: 0.5;
 }

<h2 class="blue-fade">
Subheadline
</h2>

- aGer

Answer 3

很遗憾，你所要求的在Firefox中不被支持，因此为了让我的示例能够正常工作，你必须使用Chrome。

示例

`

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

<h1>Text</h1>

- HTMLNoob