CSS 필터란 무엇입니까?

CSS 필터를 사용하면 흐림 또는 색상 이동과 같은 그래픽 효과를 요소에 적용할 수 있습니다. 일반적으로 이미지, 배경 및 테두리에 사용됩니다.

필터는 외부 이미지 편집 도구 없이도 시각 효과를 만들거나, 이미지를 향상시키거나, 고유한 디자인 요소를 만드는 데 사용할 수 있습니다.

지원되는 CSS 필터 속성

• blur()- 요소에 가우시안 흐림 효과를 적용합니다.
• brightness()- 요소의 밝기를 조정합니다.
• contrast()- 요소의 대비를 조정합니다.
• grayscale()- 요소를 회색 음영으로 변환합니다.
• hue-rotate()- 요소에 색조 회전을 적용합니다.
• invert()- 요소의 색상을 반전시킵니다.
• opacity()- 요소의 불투명도를 조정합니다.
• saturate()- 요소를 포화시키거나 채도를 낮춥니다.
• sepia()- 요소를 세피아로 변환합니다.

필터를 적용하는 방법

이 도구에서 생성된 CSS 코드를 사용하여 모든 HTML 요소에 필터를 적용할 수 있습니다. 방법은 다음과 같습니다.

.filtered-image { filter: blur(5px) brightness(110%) contrast(120%); }

filter: blur(2px) brightness(110%) contrast(120%) saturate(150%);

브라우저 호환성

CSS 필터는 Chrome, Firefox, Safari, Edge 및 Opera를 포함한 최신 브라우저에서 널리 지원됩니다. 그러나 Internet Explorer와 같은 이전 브라우저는 이를 지원하지 않습니다.