[CSS] filter: invert() 사용법

 

CSS의 filter 속성은 이미지나 요소에 다양한 시각적 효과를 적용하는 데 사용됩니다.

그중 invert() 필터는 색상을 반전시켜 밝은 색을 어둡게, 어두운 색을 밝게 표현하는 기능을 제공합니다.

즉, 흰색(white)은 검은색(black)으로, 파란색(blue)은 주황색(orange)으로 변환됩니다.

---

기본 문법

filter: invert(값);

 

값은 0에서 1 사이의 **비율(%)**을 의미합니다.

• invert(0) → 원래 색상 유지
• invert(1) → 100% 반전 (완전 반대 색상)
• invert(0.5) → 50% 반전 (부분적으로 반전된 색상)

---

이미지 색상 반전

invert()는 특히 이미지 색상을 반전하는 데 유용합니다.

 

See the Pen Untitled by jjung (@jjung2) on CodePen.

 

버튼을 클릭하면 invert(1)이 적용되어 이미지 색이 반대로 변환됩니다.

---

다크 모드에서 invert() 활용하기

웹사이트에서 다크 모드를 쉽게 구현할 때 invert()를 활용할 수 있습니다.

 

See the Pen Untitled by jjung (@jjung2) on CodePen.

 

버튼을 클릭하면 invert(1)이 적용되어 밝은 화면이 어두운 다크 모드로 변환됩니다.

---

특정 요소의 색상 반전 방지

웹사이트의 전체 색상을 invert(1)로 반전할 경우, 로고나 이미지가 깨져 보일 수 있습니다.
이럴 때는 반전된 상태를 다시 원래 색상으로 복구하는 방법을 사용하면 됩니다.

body {
  filter: invert(1);
  background-color: black; /* 배경색 보정 */
}

.logo {
  filter: invert(1); /* 로고만 다시 반전하여 원래 색상 유지 */
}

 

전체 웹사이트가 반전되지만, .logo 요소는 다시 원래 색상으로 복구됩니다.