Question

我一直在四处寻找，但却找不到任何相关内容。

如果我有一段文字，有没有办法，也许用CSS3逐渐改变文字的颜色，因为它下到页面？而不是渐变的方式，因为它只在单词而不是整段文本上进行。

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

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

感谢。

Answer 1

你可以使用CSS来实现它，但它只适用于webkit浏览器（Chrome和Safari）：http://jsfiddle.net/joshnh/DphXz/

Answer 2

我能够在纯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>

Answer 3

这是使用基本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>

Answer 4

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

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

css文本渐变

4 个答案: