필터 속성

CSS3에서는 filter 속성을 사용하여 이미지에 다양한 효과를 적용할 수 있습니다. 색상을 조절하는데 유용한 몇 가지 필터가 있습니다.

색상 매트릭스

filter: saturate(2);와 같이 saturate 함수를 사용하여 이미지의 채도를 조절할 수 있습니다. 값이 1보다 작으면 채도가 감소하고, 값이 1보다 크면 증가합니다.

색상 반전

filter: invert(100%);를 사용하여 이미지의 색상을 반전시킬 수 있습니다. 값이 100%인 경우 모든 색상이 반전됩니다.

흑백 처리

filter: grayscale(100%);는 이미지를 흑백으로 변환합니다. 값이 100%인 경우 흑백으로 완전히 변환됩니다.

채도

filter: hue-rotate(90deg);를 사용하여 이미지의 색조를 회전시킬 수 있습니다. 값은 각도를 나타냅니다.

예제

다음은 필터를 사용하여 이미지의 색상을 변경하는 간단한 예제입니다.

.img-filter {
  filter: saturate(2) invert(100%);
}

이렇게하면 .img-filter 클래스가 지정된 이미지에 채도가 증가하고 색상이 반전되는 효과가 적용됩니다.

이제 여러분은 CSS 필터를 사용하여 이미지에 다양한 색상 조절 효과를 쉽게 적용할 수 있습니다. 추가적인 정보가 필요하다면 CSS Filter를 참조해보세요.