CSS의 Invert(반전) 효과는 개체의 색상을 색상 스펙트럼에서 정반대 값으로 매핑하는 필터입니다. 쉽게 말해, 사진을 현상할 때 얻는 것처럼 네거티브(음화) 이미지를 만들어내는 효과라고 할 수 있습니다.
이 필터에서 사용되는 매개변수는 다음과 같습니다.
| 번호 | 매개변수 및 설명 |
|---|---|
| 1 | Invert 개체의 색상을 색상 스펙트럼에서 반대 값으로 매핑합니다. |
예제
아래 코드를 실행하면 이미지와 텍스트의 색상이 반전되어 출력되는 것을 확인할 수 있습니다.
<html> <head> </head> <body> <img src = "/images/css.gif" alt = "CSS Logo" style = "Filter: invert"> <p>텍스트 예제:</p> <div style = "width: 357; height: 50; font-size: 30pt; font-family: Arial Black; color: red; Filter: invert">CSS Tutorials</div> </body> </html>
참고 사항
Filter: invert 속성은 과거 인터넷 익스플로러에서 지원하던 레거시 필터 문법입니다. 최신 브라우저에서는 CSS 표준인 filter: invert(100%) 형태로 사용하는 것이 좋습니다. 예를 들어 filter: invert(0%)는 원본 그대로, filter: invert(100%)는 완전히 반전된 네거티브 이미지를 나타냅니다.