在编写以下代码后,颜色在行的结尾处停止,并在下一行再次开始。我希望它继续并以另一种颜色结束,直到到达第二行的末尾。然后继续这样做。
这是我在p标签上使用的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也可以。
答案 0 :(得分:7)
只需添加一个显示:行内显示和一些红色:
.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>