渐变文字颜色

Question

是否有一个发电机,或者一个简单的方法来生成诸如文本这样,但不必定义每一封信

所以像这样:

.rainbow {
  background-image: -webkit-gradient( linear, left top, right top, color-stop(0, #f22), color-stop(0.15, #f2f), color-stop(0.3, #22f), color-stop(0.45, #2ff), color-stop(0.6, #2f2),color-stop(0.75, #2f2), color-stop(0.9, #ff2), color-stop(1, #f22) );
  background-image: gradient( linear, left top, right top, color-stop(0, #f22), color-stop(0.15, #f2f), color-stop(0.3, #22f), color-stop(0.45, #2ff), color-stop(0.6, #2f2),color-stop(0.75, #2f2), color-stop(0.9, #ff2), color-stop(1, #f22) );
  color:transparent;
  -webkit-background-clip: text;
  background-clip: text;
}

<span class="rainbow">Rainbow text</span>

但不是彩虹色而是用其他颜色生成(例如白色到灰色/浅蓝色渐变等)我找不到一个简单的解决方案.有解决方案吗

Answer 1

我不知道停止的东西是如何工作的.但我有一个渐变文本示例.也许这会帮助你!

_如果需要,您还可以为渐变添加更多颜色,或者只选择颜色生成器中的其他颜色

.rainbow2 {
    background-image: -webkit-linear-gradient(left, #E0F8F7, #585858, #fff); /* For Chrome and Safari */
    background-image:    -moz-linear-gradient(left, #E0F8F7, #585858, #fff); /* For old Fx (3.6 to 15) */
    background-image:     -ms-linear-gradient(left, #E0F8F7, #585858, #fff); /* For pre-releases of IE 10*/
    background-image:      -o-linear-gradient(left, #E0F8F7, #585858, #fff); /* For old Opera (11.1 to 12.0) */
    background-image:         linear-gradient(to right, #E0F8F7, #585858, #fff); /* Standard syntax; must be last */
    color:transparent;
    -webkit-background-clip: text;
    background-clip: text;
}
.rainbow {

  background-image: -webkit-gradient( linear, left top, right top, color-stop(0, #f22), color-stop(0.15, #f2f), color-stop(0.3, #22f), color-stop(0.45, #2ff), color-stop(0.6, #2f2),color-stop(0.75, #2f2), color-stop(0.9, #ff2), color-stop(1, #f22) );
  background-image: gradient( linear, left top, right top, color-stop(0, #f22), color-stop(0.15, #f2f), color-stop(0.3, #22f), color-stop(0.45, #2ff), color-stop(0.6, #2f2),color-stop(0.75, #2f2), color-stop(0.9, #ff2), color-stop(1, #f22) );
  color:transparent;
  -webkit-background-clip: text;
  background-clip: text;
}

<span class="rainbow">Rainbow text</span>
<br />
<span class="rainbow2">No rainbow text</span>

Answer 2

这种效果的工作方式非常简单.元素的背景是渐变.它根据颜色和颜色停止百分比从一种颜色到另一种颜色.

例如,在彩虹文本示例中(请注意我已将渐变转换为标准语法):

• 渐变从颜色#f22处开始0%(即元素的左边缘).0%即使未明确提及百分比,也始终假定第一种颜色开始.
• 间0%来14.25%,从颜色的变化#f22来#f2f逐渐显现.设置percenatge是14.25因为有七种颜色变化,我们正在寻找相等的分割.
• 在14.25%(容器的大小),颜色将完全按照#f2f指定的渐变.
• 类似地,颜色根据颜色停止百分比指定的频带从一个变为另一个.每个乐队应该是一步14.25%.

因此,我们最终获得了如下面的代码段中的渐变.现在这就意味着背景适用于整个元素,而不仅仅是文本.

.rainbow {
  background-image: linear-gradient(to right, #f22, #f2f 14.25%, #22f 28.5%, #2ff 42.75%, #2f2 57%, #2f2 71.25%, #ff2 85.5%, #f22);
  color: transparent;
}

<span class="rainbow">Rainbow text</span>

由于渐变只需要应用于文本而不是整体应用于元素,因此我们需要指示浏览器剪切文本外部区域的背景.这是通过设置完成的background-clip: text.

(请注意,这background-clip: text是一个实验属性,并不广泛支持.)

现在,如果您希望文本具有简单的3色渐变(即红色 - 橙色 - 棕色),我们只需要更改线性渐变规范,如下所示:

• 第一个参数是梯度的方向.如果颜色左侧为红色,右侧为棕色,则使用方向为to right.如果它应该是右边的红色和左边的棕色那么给出方向to left.
• 下一步是定义渐变的颜色.由于我们的渐变应该在左侧以红色开始,因此只需指定red为第一种颜色(假设百分比为0%).
• 现在,由于我们有两种颜色变化(红色 - 橙色和橙色 - 棕色),因此对于相等的分割,百分比必须设置为100/2.如果不需要相等的分割,我们可以根据需要分配百分比.
• 所以50%颜色应该是orange,然后最终的颜色brown.最终颜色的位置始终假定为100%.

因此,梯度的规范应如下所示:

background-image: linear-gradient(to right, red, orange 50%, brown).

如果我们使用上述方法形成渐变并将它们应用于元素,我们可以获得所需的效果.

.red-orange-brown {
  background-image: linear-gradient(to right, red, orange 50%, brown);
  color: transparent;
  -webkit-background-clip: text;
  background-clip: text;
}
.green-yellowgreen-yellow-gold {
  background-image: linear-gradient(to right, green, yellowgreen 33%, yellow 66%, gold);
  color: transparent;
  -webkit-background-clip: text;
  background-clip: text;
}

<span class="red-orange-brown">Red to Orange to Brown</span>

<br>

<span class="green-yellowgreen-yellow-gold">Green to Yellow-green to Yellow to Gold</span>

Answer 3

You can achieve that effect using a combination of CSS linear-gradient and mix-blend-mode.

HTML

<p>
    Enter your message here... 
    To be or not to be, 
    that is the question...
    maybe, I think, 
    I'm not sure
    wait, you're still reading this?
    Type a good message already!
</p>

CSS

p {
    width: 300px;
    position: relative;
}

p::after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(45deg, red, orange, yellow, green, blue, purple);
    mix-blend-mode: screen;
}

What this does is add a linear gradient on the paragraph's ::after pseudo-element and make it cover the whole paragraph element. But with mix-blend-mode: screen, the gradient will only show on parts where there is text.

Here's a jsfiddle to show this at work. Just modify the linear-gradient values to achieve what you want.