时间戳

首页 > 解决方案 > 如何使用适应屏幕尺寸并在新行上继续颜色的渐变颜色为文本着色？

javascript - 如何使用适应屏幕尺寸并在新行上继续颜色的渐变颜色为文本着色？

问题描述

编写以下代码后，颜色在行尾停止并在下一行重新开始。我希望它继续并以不同的颜色结束，直到它到达第二行的末尾。然后继续这样做。

这是我在 ap 标签上使用的 css 类。

$font: 'Poppins', sans-serif;

.text {
    background: linear-gradient(to right, #000000 0%, #4ad7fa 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    font: {
        size: 3vw;
        family: $font;
    };
}

这是我得到的：

在此处输入图像描述

这就是我的期望：

在此处输入图像描述

我可以在不使用任何 JavaScript 的情况下做到这一点吗？虽然 javascript 也很好。

标签： javascripthtmlcss

解决方案

只需添加一个 display : inline 和几个 red ：

.text {
  display: inline;
  background: linear-gradient(to right, #000 0%, blue 25%, #000 50%, red 75%, #000 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  font-size: 3vw;
  font-family: "Poppins", sans-serif;
}
<p class="text">Lorem ipsum dolor sit amet consectetur adipisicing elit. Libero, quo consectetur similique blanditiis explicabo dolorum quam voluptate, accusamus repellat sed ipsam doloribus facere quas perspiciatis veritatis ad dicta. Tenetur, vero?
</p>

推荐阅读