如何用css更改文本前几行的颜色

Question

如何使用css更改前几行文本的颜色？请检查我下面的片段，一切都会清楚的。我知道这是可能的，但不记得是怎么。。。我必须能够为两半都设置一个特定的颜色。

.container{
max-width: 300px;
}
h1 {
position: relative;
font-family: verdana;
color: lightblue;
text-align: left;
}
h1:after{
content: "";
position: absolute;
left: 0px;
right: 0px;
top: 0px;
height: 50%;
background-color: rgb(255, 255, 255); 
mix-blend-mode: difference;
}

<div class="container">
<h1>This is a very very long text, that should be written in the same element, but with two different colors</h1>
</div>

Answer 1

不需要伪元素。您可以只使用背景图像进行此操作。我使用了一些CSS变量来轻松控制。

.container {
max-width: 300px;
}
h1 {
--line-height: 1em; /* we should use line-height */
--line-count: 3; /* you can change the line count */

line-height: var(--line-height);
background-color: lightblue;
background-image: linear-gradient(red, red);
background-size: 100% calc( var(--line-height) * var(--line-count));
background-repeat: no-repeat;
-webkit-background-clip: text;
background-clip: text;
color: transparent;

position: relative;
font-family: verdana;
text-align: left;
}

<div class="container">
<h1>This is a very very long text, that should be written in the same element, but with two different colors</h1>
</div>