CSS를 사용하여 각 텍스트 줄에 다른 수평 색 그라디언트를 적용 할 수 있습니까

Question

텍스트 본문에 수평 색 그라디언트를 적용하는 몇 가지 예가 있습니다.

그러나 각 예제에서 사용되는 기술은 배경에 그라디언트를 적용한 다음 텍스트를 선명하게 만들고 텍스트에 그라데이션을 적용하는 것입니다.

예

css text gradient

이

Gradient text color

• Is it possible to set horizontal gradient to text via CSS? (left letter one colour, right - another colour)
내 목표를 위해 작동하지 않습니다 있습니다. 나는 텍스트의 각 줄마다 다른 그라디언트가있을 것이라고 생각하고있다. 예를 들어, 1 행에는 빨간색에서 검은 색으로 그라데이션이 있습니다. 두 번째 줄에는 검은 색에서 파란색으로 기울기가 있습니다. 3 번줄은 파란색에서 빨간색으로 그라디언트가됩니다. 여기
이의 예입니다 나는 무엇을 찾고 :



내가 방사형 그라디언트가도 적용 할 수 있다는 것을 알고 있지만, CSS는 것 같이 그 또한 작동하지 않습니다 텍스트 본문 길이의 텍스트 크기가 변하는 경우 재조정됩니다.

Answer 1

각 줄마다 하나씩 다른 배경을 설정할 수 있습니다. 하지만 라인

p { 
 
    background-image: linear-gradient(to right, red, blue), 
 
    linear-gradient(to right, green, yellow), linear-gradient(to right,purple, cyan); 
 
    background-size: 100% 1.2em; 
 
    background-position: left 0, left 1.2em, left 2.4em; 
 
    background-repeat: no-repeat; 
 
    -webkit-background-clip: text; 
 
    -webkit-text-fill-color: transparent; 
 
    font-size: 30px; 
 
}

<p>blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah</p>

엄청난 수의이 적응하는 방법을 볼 수 없습니다