배경 색상을 기준으로 CSS 글꼴 색상 반전

CSS에는 다음을 기준으로 글꼴 색상을 반전할 수 있는 직접적인 속성이 없습니다. 배경색. 그러나 이 효과를 얻기 위해 활용할 수 있는 다양한 기술이 있습니다.

의사 요소 사용

의사 요소를 사용하여 텍스트 주위에 래퍼를 만들 수 있습니다. 그런 다음 독립적으로 스타일을 지정할 수 있습니다. 예:

.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 사용

의사 요소를 지원하지 않는 이전 브라우저의 경우 대신 두 개의 DIV를 사용할 수 있습니다.

.inverted-bar {
    position: relative;
    padding: 10px;
    text-indent: 10px;
}

.inverted-bar:before {
    content: attr(data-content);
    background-color: aqua;
    color: red;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 1;
    white-space: nowrap;
    overflow: hidden;
    padding: 10px 0;
    width: 100%;
}

.inverted-bar > div {
    content: attr(data-content);
    background-color: red;
    color: aqua;
    position: absolute;
    padding: 10px 0;
    top: 0;
    left: 0;
    width: 20%;
}

참고: 정확한 구현은 특정 요구 사항 및 브라우저 지원에 따라 다를 수 있습니다.