[css] CSS를 사용하여 색상을 반전하려면 어떻게해야합니까?

Program / 글쓴이

HTML

<div>
    <p>inverted color</p>
</div>

CSS

div {
    background-color: #f00;
}
p {
    color: /* how to use inverted color here in relation with div background ? */
}

pCSS로 색상 을 반전시키는 방법이 있습니까?

이 color: transparent;왜 안 color: invert;, 심지어 CSS3에?

답변

단락에 동일한 색상의 배경을 추가 한 다음 CSS로 반전합니다. 

div {
    background-color: #f00;
}

p {
    color: #f00;
    -webkit-filter: invert(100%);
    filter: invert(100%);
}
<div>
    <p>inverted color</p>
</div>

스 니펫 확장

답변

다음 mix-blend-mode: difference은를 사용하는 다른 접근 방식 으로, 단일 색상이 아닌 배경이 무엇이든 실제로 반전됩니다.

div {
  background-image: linear-gradient(to right, red, yellow, green, cyan, blue, violet);
}
p {
  color: white;
  mix-blend-mode: difference;
}
<div>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscit elit, sed do</p>
</div>

스 니펫 확장

답변

이를 처리하는 유일한 방법은 JavaScript를 사용하는 것입니다.

특정 요소의 텍스트 색상 반전을 시도하십시오.

css3로이 작업을 수행하면 최신 브라우저 버전과 만 호환됩니다.

답변