CSS文本渐变

Question

CSS文本渐变

cssgradient

18

我稍微查了一下，没有找到任何相关的内容。

如果我有一个文本段落，是否有方法（可能使用CSS3）逐渐改变文本颜色使其在页面下降时发生变化？而不是像渐变那样，因为渐变只对单词进行操作，而不是整个文本段落。

所以，我想让一些文本从白色开始，然后随着到达段落结尾而淡入黑色。

我真的不确定它能否实现...也许有一种JavaScript可以做到。

谢谢。

- ragebunny

6个回答

4

在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中测试过，它确实可以工作。

- Toastrackenigma

2

这里有一个基于基础CSS的简单解决方案。您可以添加一个覆盖层div，其中包含从白色到透明的线性渐变linear-gradient。该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>

- saad-mb

1

我能够在纯CSS中做类似的事情，但是它在IE中不起作用，因为它不支持mix-blend-mode CSS属性：http://caniuse.com/#feat=css-mixblendmode 以下是代码片段。希望可以帮助到某些人。

<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>

- mp_loki

0

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

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

- Casey Robinson

0

这样做

 .p {
      background: linear-gradient(to right, #911a80, #d42b45);
      background-clip: text;
      color: transparent;
    }

- Matoeil

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- joshnh · Accepted Answer

你可以使用CSS完成此操作，但它仅在Webkit浏览器（Chrome和Safari）中有效：

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

<p>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</p>