programing tip

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

itbloger 2020. 11. 15. 10:59
반응형

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


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>


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

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

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

참고 URL : https://stackoverflow.com/questions/17741629/how-can-i-invert-color-using-css

반응형