CSS3 그라디언트를 사용하여 텍스트 색상 그라디언트를 얻는 방법은 무엇입니까?

최근 웹디자인에서는 그라데이션이 들어간 디자인이 점점 많아지는 느낌이에요. 이번에는 CSS3 그라데이션을 텍스트에 적용하는 방법과 텍스트에 이미지를 채우는 방법을 소개하겠습니다.

텍스트에 색상 그라데이션 추가

그라디언트 색상을 텍스트의 배경색으로 설정하는 방법입니다. 현재 지원되는 브라우저는 Google Chrome, Safari, Opera입니다. (추천 과정: CSS3 비디오 튜토리얼)

HTML

<h1>你好，PHP中文网</h1>

HTML은 그라데이션할 텍스트를 있는 그대로 나열합니다.

CSS

h1{
  color: #ACB6E5;
  background: -webkit-linear-gradient(90deg, #ACB6E5, #86FDE8);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

효과는 다음과 같습니다.

그라디언트의 각도를 지정하여 색상의 위치를 ​​변경하여 약간 거친 질감을 줄 수도 있습니다.

CSS

h1{
  color: #FF7C00;
  background: -webkit-linear-gradient(top, #FFB76B 0%, #FFA73D 50%, #FF7C00 51%, #FF7F04 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

효과는 다음과 같습니다:

이미지를 사용하여 텍스트 색상을 채웁니다.

그라디언트 색상을 배경 색상으로 설정하는 것 외에도 이미지를 사용하여 텍스트 색상을 설정할 수도 있습니다. 글꼴 색상.

이 사진을 사용하여 배경색을 설정해 보겠습니다

코드는 다음과 같습니다.

	
	


<h1>你好，PHP中文网</h1>

효과는 다음과 같습니다.

위 내용은 CSS3 그라디언트를 사용하여 텍스트 색상 그라디언트를 얻는 방법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!