배경색을 기준으로 CSS 글꼴 색상을 반전하는 방법은 무엇입니까?

배경색에 따라 CSS 글꼴 색상 반전

배경색에 따라 글꼴 색상 반전을 달성하는 것은 일반적인 디자인 요구 사항입니다. 이 질문은 CSS를 사용하여 이를 수행하는 방법을 탐구합니다.

해결책: Mix-Blend-Mode(제한적 지원)

mix-blend-mode CSS 속성은 색상 혼합을 허용합니다. 기본 배경색을 기반으로 합니다. 그러나 이 속성은 Internet Explorer에서 지원되지 않습니다.

해결 방법: 의사 요소(권장)

브라우저 간 호환성을 위해 권장되는 접근 방식은 의사 요소( :이전 및 :이후). 텍스트 위에 색상이 있는 의사 요소를 배치하고 해당 텍스트 색상을 원하는 역값으로 설정하면 원하는 효과를 낼 수 있습니다.

.inverted-bar {
  position: relative;
}

.inverted-bar:before,
.inverted-bar:after {
  padding: 10px 0;
  text-indent: 10px;
  position: absolute;
  white-space: nowrap;
  overflow: hidden;
  content: attr(data-content);
}

.inverted-bar:before {
  background-color: aqua;
  color: red;
  width: 100%;
}

.inverted-bar:after {
  background-color: red;
  color: aqua;
  width: 20%;
}

해결책: 두 개의 DIV(IE6 및 IE7 지원)

특히 IE6 및 IE7의 경우 추가적인 브라우저 간 지원을 위해 의사 요소 대신 두 개의 DIV 요소를 사용할 수 있습니다. 여기에는 두 번째 DIV를 첫 번째 DIV 위에 절대적으로 배치하고 원하는 효과를 얻기 위해 Z-색인, 불투명도 및 배경색을 설정하는 작업이 포함됩니다.

위 내용은 배경색을 기준으로 CSS 글꼴 색상을 반전하는 방법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!