是否有可能淡出CSS中文本行的结尾？

Question

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

但是,如果您具有基于渐变的背景和某种颜色,则淡入淡出在此方法中不起作用.我找不到任何其他方法来实现这种期望的外观.

难道没有办法在直接应用于它的渐变方法中淡出文本以变为透明吗？

Answer 1

有一个使用 的时尚解决方案mask-image。是的，它使用 a linear-gradient()，但是，因为它适用于纯透明度，所以不需要了解背景颜色：

div {
  white-space: nowrap;
  -webkit-mask-image: linear-gradient(to right, rgba(0,0,0,1) 90%, rgba(0,0,0,0));
}

在 Chrome 和caniusemask-image中为我工作，看起来不错。

Answer 2

你正在寻找的是这样的东西吗？

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>