CSS의 배경색을 기반으로 글꼴 색상을 동적으로 반전하려면 어떻게 해야 합니까?

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

CSS에서는 색상에 따라 글꼴 색상을 반전하려는 시나리오가 발생할 수 있습니다. 배경색을 사용하여 아래 이미지와 유사한 효과를 얻습니다.

[유색 배경에 흰색과 검정색 텍스트가 번갈아 나타나는 이미지 패널]

CSS 솔루션:

배경색에 따라 글꼴 색상을 반전시키는 직접적인 CSS 속성은 없지만 의사 요소를 사용하여 이를 달성할 수 있습니다. 또한 IE6 및 IE7과 같은 이전 브라우저와의 호환성을 위해 의사 요소 대신 두 개의 DIV를 사용할 수 있습니다.

Mix-Blend-Mode 속성:

CSS에는 mix-blend-mode라는 속성이 있지만 Internet Explorer에서는 지원되지 않습니다. 이 속성을 사용하면 전경색(글꼴 색상)과 배경색을 혼합하여 다양한 효과를 만들 수 있습니다. 그러나 언급한 바와 같이 제한된 브라우저 지원으로 인해 이 시나리오에서는 실용성이 떨어집니다.

의사 요소 접근 방식:

의사 요소를 사용하여 교대 색상 효과를 생성하려면, 상대 위치를 사용하여 상위 요소에 :before 및 :after 의사 요소를 삽입합니다. 이러한 의사 요소의 내용을 원하는 텍스트로 설정하고 배경색을 조정합니다. :after 의사 요소의 너비를 제어하면 반전 효과를 얻을 수 있습니다.

예제 코드:

.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%;
}

html {
    font-size: 16px;
}

<div class="inverted-bar" data-content="Lorem ipsum dolor sit amet"></div>

이 접근 방식을 사용하면 다음을 수행할 수 있습니다. 배경 색상에 따라 글꼴 색상을 반전시켜 웹 디자인에 시각적으로 매력적인 효과를 만들어보세요.

위 내용은 CSS의 배경색을 기반으로 글꼴 색상을 동적으로 반전하려면 어떻게 해야 합니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!