是否可以淡出CSS中文本行的结尾?

问题描述

我已经看到了各种示例，这些示例说明了如何在CSS中淡出一行文本.但是，这些都涉及与背景色匹配的渐变叠加.例如，通常背景可能是白色，背景也是白色.

I've seen various examples of how to fade out a line of text in CSS. However, these all involve a gradient overlay which matches the background colour. Usually this might be white for example, where the background is also white.

但是，如果您使用的是具有某些颜色的基于渐变的背景，则淡变不适用于这种方法.我找不到任何其他方法来实现此所需的外观.

However, if you have a gradient based background with some colour for example, the fade doesn't work in this approach. I can not find any other methods to achieve this desired look.

是否没有办法通过直接应用渐变方法淡出文本使其变得透明?

Is there not a way to fade out text to become transparent itself in a gradient method applied to it directly?

推荐答案

您正在寻找类似这样的东西吗?

Is something like this what you're looking for?

div {
  background: linear-gradient(to bottom right, red, yellow);
}
h2 {
    background-image: linear-gradient(90deg,#000000 0%,rgba(0,0,0,0));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    position:relative;
    display:inline-block;
    font-size: 50px;
}

<div>
  <h2>
    test test test test test
  </h2>
</div>

这篇关于是否可以淡出CSS中文本行的结尾?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！