问题 css文本渐变

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

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

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

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

谢谢。

5947

2017-12-05 11:41

起源

答案:

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

2017-12-05 11:49

多数民众赞成....但这是一个耻辱它唯一的webkit浏览器......我想知道是否有任何解决IE和Firefox的工作！？感谢那。 - ragebunny

希望其他浏览器将开始实现这些功能，但在此之前，它只是遗憾的是webkit。 - joshnh

答案:

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

2017-12-05 11:49

多数民众赞成....但这是一个耻辱它唯一的webkit浏览器......我想知道是否有任何解决IE和Firefox的工作！？感谢那。 - ragebunny

希望其他浏览器将开始实现这些功能，但在此之前，它只是遗憾的是webkit。 - joshnh

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

2018-02-09 11:14

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

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

2017-12-05 15:01

问题 css文本渐变

答案:

答案:

热门问题