CSS를 사용하여 텍스트 요소에 선형 그라디언트 색상을 추가하는 방법과 일반적인 그라디언트 실수를 피하는 방법을 알아보세요.
HTML 텍스트 요소에 그라데이션 텍스트 색상을 추가하려면 다음 CSS 속성이 필요합니다.
background-webkit-background-clip-webkit-text-fill-color
background을 사용하는 이유 텍스트를 색칠하기 위한 속성? 접근 방식이 약간 해킹된 것처럼 보이지만 효과가 있음을 약속합니다!
주황색과 빨간색의 두 가지 색상을 사용하여 텍스트 요소에 왼쪽에서 오른쪽으로 선형 그라디언트를 적용하는 간단한 예를 만들어 보겠습니다.
HTML
<h2> text-gradient라는 클래스 속성이 있는 표제 요소 :
<h2 class="text-gradient">Gradient text color!</h2>CSS
.text-gradient에 색상 그라디언트 스타일 추가 클래스:
.text-gradient {
/* Set the background color */
background: linear-gradient(to right, #ff8a00 0%, #dd4c4f 100%);
/* Mask the color to the text, and remove the rest */
-webkit-background-clip: text;
/* Make the text fill color value transparent so the masked background color comes through */
-webkit-text-fill-color: transparent;
}결과:
그라디언트 텍스트 색상!
좋아요!
하지만 잠깐만!
두 가지 색상이 텍스트 요소에 적용되는 방식에 문제가 있습니까? 색상이 고르지 않게 적용됩니다.
linear-gradient CSS 함수는 두 가지 색상 값을 사용합니다.
#ff8a00(주황색)#DD4C4F(빨간색)
그리고 CSS에 지정된 대로 0에서 100%까지 고르게 퍼져야 합니다.
(to right, #ff8a00 0%, #DD4C4F 100%)그래서 우리는 이것을 원합니다. 텍스트 요소:
그러나 텍스트 예제는 거의 완전히 주황색입니다.
그라디언트 텍스트 색상!
팁:이 웹사이트의 색상 테마를 어두운 모드로 전환하면(달 아이콘 클릭) 보기가 더 쉽습니다.
<h2> 때문에 발생합니다. 제목 요소는 블록 수준입니다. 기본적으로 요소. 이는 배경이 전체 너비에 걸쳐 있음을 의미합니다. 부모 컨테이너의
이것은 그라디언트 클래스(.text-gradient ) <h2>에 추가했습니다. 요소가 background를 대상으로 하기 때문에 텍스트 너비 이상으로 늘어납니다. 재산.
요점을 명확히 하기 위해 텍스트 예제에 테두리를 추가하겠습니다.
그라디언트 텍스트 색상!
보이시나요?
텍스트 그라데이션은 배경이 아닌 텍스트에만 설정해야 합니다(그러나 background 이 작업을 수행하는 속성).
이 문제를 해결하려면 <h2>를 재정의해야 합니다. 요소의 기본 display:block inline-block을 추가하여 설정 대신:
.text-gradient {
background: linear-gradient(to right, #ff8a00 0%, #dd4c4f 100%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
display: inline-block;
}결과:
그라디언트 텍스트 색상!
달콤한! 차이점이 보이시나요? 이제 2색 그라디언트의 빨간색 부분이 50-50으로 적용되었기 때문에 주황색만큼 터집니다.
브라우저 호환성
그라데이션 색상 트릭은 WebKit 브라우저에서만 지원됩니다. 다른 브라우저의 경우 일반 CSS color 사용 속성을 대체 옵션으로 사용하고 그라디언트와 유사한 색상을 사용합니다.