CSS의 반전(Invert) 효과는 객체의 색상을 색 스펙트럼에서 정반대 값으로 매핑하는 필터입니다. 쉽게 말해, 원본 이미지나 텍스트를 사진의 네거티브(음화)처럼 보이게 만드는 효과라고 할 수 있습니다.
매개변수
반전 필터에서 사용되는 매개변수는 다음과 같습니다.
| 번호 | 매개변수 및 설명 |
|---|---|
| 1 | Invert 객체의 색상을 색 스펙트럼에서 정반대 값으로 변환합니다. |
예제
아래 코드를 실행하면 이미지와 텍스트에 반전 효과가 적용되는 것을 직접 확인할 수 있습니다.
<html> <head> </head> <body> <img src = "/images/css.gif" alt = "CSS 로고" 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 문법은 구형 Internet Explorer 전용 방식입니다. 최신 브라우저에서는 표준 filter 속성을 사용하는 것이 좋습니다.
img {
filter: invert(100%);
}invert() 함수는 0%부터 100%까지의 값을 받으며, 100%에 가까울수록 완전한 네거티브 효과가 나타납니다. 다크 모드 전환 버튼이나 특별한 시각적 강조 효과를 구현할 때 유용하게 활용할 수 있습니다.