콘텐츠를 복제하지 않고 CSS에서 이중 색상 텍스트를 만드는 방법은 무엇입니까?

CSS를 사용한 이중 색상 텍스트

한 면에는 특정 색상과 배경이 있고 한 면에는 특정 색상과 배경이 있는 텍스트 효과를 어떻게 얻을 수 있는지에 대한 의문이 생깁니다. 반대편은 내용의 중복 없이 다른 색상과 배경을 가지고 있습니다. 제공된 예에서는 인라인 블록이 포함된 div를 사용하고 각 div의 너비, 배경색, 오버플로 및 높이를 설정하여 이 효과를 보여줍니다. 이러한 div 내에서 단락은 너비 200%와 다양한 텍스트 색상으로 정의됩니다.

그러나 이 접근 방식을 사용하려면 콘텐츠를 복제해야 합니다. 이를 방지하기 위해 다른 기술을 사용할 수 있습니다. Background-clip:text CSS 속성이 도움이 됩니다. 이 속성을 사용하면 배경을 렌더링해야 하는 영역을 정의할 수 있습니다. 이 경우 텍스트 자체에 배경을 적용하는 '텍스트'로 설정할 수 있습니다.

이 기술을 사용하면 텍스트에 그라데이션 배경을 만들어 양쪽에 다양한 색상 조합을 허용할 수 있습니다. . 다음 CSS 및 HTML 코드는 이 접근 방식을 보여줍니다.

#main {
  background: linear-gradient(to right, red 50%, #fff 50%);
}

#main>p {
  background: linear-gradient(to left, blue 50%, #fff 50%);
  display: inline-block;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}

<div></div>

위 내용은 콘텐츠를 복제하지 않고 CSS에서 이중 색상 텍스트를 만드는 방법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!