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

87

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 colors

— 보젠 드라 라우 니야
소스

2

-webkit-filter : invert (100 %);

— daniel__

1

이것은 매우 도움이 될 수 있습니다 : net.tutsplus.com/tutorials/html-css-techniques/...

— 론 반 Heijden 데르

3

이 바이올린 에서는 WebKit 용 CSS 필터, Firefox 용 SVG 필터, IE 용 outline-color: invert Lea Verou 가 발명 한 멋진 트릭의 3 가지 접근 방식을 결합하려고했습니다 . 불행히도 Opera (Presto)는 윤곽선으로 채워진 영역을으로 잘라 내지 않았 overflow으므로 작동하지 않습니다. 이 데모가 추가 실험에 여전히 유용 할 수 있기를 바랍니다.

— Ilya Streltsyn 2013

130

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

div {
    background-color: #f00;
}

p { 
    color: #f00;
    -webkit-filter: invert(100%);
    filter: invert(100%);
}

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

스 니펫 확장

— 브루노 레 모스
소스

이것은를 반전 color하지만 background. color과 동일하게 설정된 경우에만 발생합니다 background-color. 배경을 반전시키는 솔루션 은 아래 를 참조하십시오 .

— ᆼ ᆺ ᆼ

10

다음 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>

스 니펫 확장

— ᆼ ᆺ ᆼ
소스

1

한 mix-blend-mode: difference작품을 filter: invert(100%)함께 사용하면 실패 position: fixed(말의 조동사) stackoverflow.com/a/37953806/366332을

— VANNI Totaro

2

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

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

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

— 얀 피터
소스