css 文本渐变

问题描述 投票：0回答：7

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

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

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

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

谢谢。

css gradient
7个回答
15
投票

您可以使用 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>

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 浏览器都会 also 忽略 
    -webkit-text-fill-color
    指令，这意味着你不会在不受支持的浏览器上不要留下透明文本。我想这是跨浏览器实现的一个问题，因为我们不能像这样进行回退，但这实际上只会对像 IE11 这样的旧浏览器来说是一个问题。
  • background-clip
    现在是其他浏览器（例如 Firefox）中跟踪和实现的标准，但奇怪的是，Chrome 人员选择保留 
    text
    剪辑选项仅在他们自己的供应商前缀版本上可用，这就是为什么我们仍然需要两者 [2].

我已经对此进行了测试，它确实可以在 Chrome 95 和 Firefox 91 中运行。

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>
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>
0
投票

这个做

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

发布如此有益的网站真是太棒了。很高兴再次访问你的博客，我已经好几个月了。这篇文章我等了好久了。我需要这篇文章来完成我在大学的作业，它与你的文章有完全相同的主题。谢谢，很好的分享。 Ufa289 Milanbet Acash888 Sawan888 Sawan789 Sawan289 Sawan168 Ko888 Ko789 19รับ100 Betflix freeforbet Sawan289 Sawan888

-1
投票

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

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

最新问题
© www.soinside.com 2019 - 2024. All rights reserved.