css 文字渐变答案

【问题标题】：css text gradientcss 文字渐变
【发布时间】：2012-01-13 03:50:38
【问题描述】：

我环顾四周，找不到任何关于此的信息。

如果我有一段文本，有没有办法，也许使用 CSS3 来逐渐改变文本的颜色，因为它下降到页面？而不是渐变的方式，因为它只对单词而不是整个文本段落。

所以我希望一些文本从白色开始，然后在到达段落末尾时逐渐变为黑色。

我真的不确定它是否可以做到......也许有一个java脚本可以做到。

谢谢。

【问题讨论】：

标签： css gradient

【解决方案1】：

您可以使用 CSS 来实现，但它只适用于 webkit 浏览器（Chrome 和 Safari）：

p {
    background: -webkit-linear-gradient(red, blue);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

&lt;p&gt;blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah&lt;/p&gt;

【讨论】：

那太棒了....但是它唯一的webkit浏览器真是太可惜了....我想知道IE和firefox是否有任何解决方法！？谢谢你。
希望其他浏览器会开始实现这些功能，但在那之前它只是 webkit。

【解决方案2】：

这是一个使用基本 CSS 的简单解决方案。您可以使用linear-gradient 从白色到透明添加覆盖div。此 div 将采用所需文本的全宽和全高。

例子：

<style>
   .overlay {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background: linear-gradient(white, transparent);
   }
</style>

<div style="position: relative;">
   <p>
      Some text<br>
      Some text<br>
      Some text<br>
      Some text<br>
   </p>
   <div class="overlay"></div>
</div>

【讨论】：

【解决方案3】：

我可以在纯 css 中做类似的事情，但是，它在 IE 中不起作用，因为它不支持 mix-blend-mode css 属性： http://caniuse.com/#feat=css-mixblendmode

代码 sn-p 如下。希望它可以帮助某人。

<html>
<head>
<style>
.gradient {
    position: relative;
    content: '';
    display: block;
    width: 260px;
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#00ffffff',GradientType=0 );
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, rgba(140,198,63,1)), color-stop(100%, rgba(30,71,146,1)));
    background: -webkit-linear-gradient(left, rgba(140,198,63,1) 0%, rgba(30,71,146,1) 100%);
    background:    -moz-linear-gradient(right, rgba(140,198,63,1) 0%, rgba(30,71,146,1) 100%);
    background:     -ms-linear-gradient(right, rgba(140,198,63,1) 0%, rgba(30,71,146,1) 100%);
    background:      -o-linear-gradient(right, rgba(140,198,63,1) 0%, rgba(30,71,146,1) 100%);
    background:         linear-gradient(to right, rgba(140,198,63,1) 0%, rgba(30,71,146,1) 100%);
}
.gradient p {
  color: #000;
  background: #fff;
  mix-blend-mode: lighten;
}
</style>
</head>
<body>
    <div class="gradient">
        <p>"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."</p>
    </div>
</body>
</html>

【讨论】：

【解决方案4】：

跨浏览器文本渐变最简单的方法是使用图像。

http://webdesignerwall.com/tutorials/css-gradient-text-effect

【讨论】：

【解决方案5】：

2021 年，我们可以跨浏览器了！

p {
    background-image: linear-gradient(red, blue);
    color: transparent;
    background-clip: text;
    -webkit-background-clip: text;
}

注意事项：

很多旧示例使用-webkit-text-fill-color 而不是color。这两者实际上在功能上是相同的^[1]（并且都支持transparent！），-webkit-text-fill-color 只是需要注意。在旧示例中使用它的原因是因为它为非 webkit 浏览器提供了优雅的回退 --- 任何忽略渐变或剪辑指令的非 webkit 浏览器也忽略 -webkit-text-fill-color 指令，这意味着您不会在不受支持的浏览器上留下透明文本。我想这是这个跨浏览器实现的问题，因为我们不能做这样的回退，但它真的只会成为像 IE11 这样的老浏览器的问题。
background-clip 现在是在其他浏览器（例如 Firefox）中跟踪和实现的标准，但奇怪的是 Chrome 人选择保留 text 剪辑选项仅在他们自己的供应商前缀版本上可用，这就是为什么我们仍然需要两者^[2].

我已经对此进行了测试，它确实适用于 Chrome 95 和 Firefox 91。

【讨论】：