css 背景渐变+文本颜色渐变

kdfy810k 于 2022-12-24 发布在其他

关注(0)|答案(1)|浏览(259)

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））。
也许你会发现这个图表很有用：

我认为：

0- 25%-白色。
25- 35%-蓝色，可能有白色阴影。
35%-蓝色。
但这是我的大特写。请，组织第二部分的颜色，因为你觉得合适。

css

来源：https://stackoverflow.com/questions/70566928/background-gradient-text-color-gradient

1条答案

按热度按时间

lmvvr0a81#

这将在文本上应用相同的渐变，但方向相反（白、白、蓝而不是蓝、蓝、白）。它将文本放在一个单独的span元素中，以为其提供应用新渐变所需的背景。然后，它将背景剪切到文本。要将渐变作为块而不仅仅是文本应用，请将span设置为inline-block元素：

.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>

赞(0）回复(0）举报 2022-12-24

我来回答

css 背景渐变+文本颜色渐变

1条答案

相关问题

热门标签

最新问答