背景梯度+文本颜色梯度

Question

https://codepen.io/Nonverbis/pen/vYJQvaw

<div class="gradient">
    Lorem Ipsum is simply dummy text of the printing and typesetting industry.
</div>

.gradient {        
   background: rgb(5,75,113);
background: linear-gradient(90deg, rgba(5,75,113,1) 0%, rgba(5,75,113,1) 17%, rgba(255,255,255,0) 50%);        
  font-weight: bold;
  padding: 1rem;
}

我组织了一个梯度背景。

但是我没有为文本做一个镜像梯度。

我的意思是，在深蓝色的背景下，我希望有一个白色的文本，但逐渐变成蓝色的(rgb(5,75,113))。

也许您会发现这个图表很有用：

​

​

我想：

1. 0-25 %-白色.
2. 25-35%-蓝色，可能带有白色阴影.
3. 35%-蓝色.

但这是我的机会。请把第二部分的颜色组织起来，因为你觉得合适。

你能帮我一下吗？

Answer 1

这在文本上应用了相同的梯度，但相反(白色、白色、蓝色而不是蓝色、蓝色、白色)。它将文本放置在单独的span元素中，以便为其提供应用新梯度所需的背景。然后将背景剪辑到文本中。若要将梯度作为块而不是仅作为文本应用，请将span设置为内联块元素：

​

.gradient {
  background: rgb(5, 75, 113);
  background: linear-gradient( 90deg, rgba(5, 75, 113, 1) 0%, rgba(5, 75, 113, 1) 17%, rgba(255, 255, 255, 1) 50%);
  font-weight: bold;
  padding: 1rem;
}

.gradient span {
  background: rgb(255, 255, 255);
  background: linear-gradient( 90deg, rgba(255, 255, 255, 1) 0%, rgba(255, 255, 255, 1) 17%, rgba(5, 75, 113, 1) 50%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  text-fill-color: transparent;
  display: inline-block; /* needed to apply gradient to block instead of text */
}

<div class="gradient"><span>
    Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</span>
</div>

​