[CSS] filter속성 - 이미지 필터 효과

* 공부를 목적으로 작성한글입니다. 틀린 정보, 부분 등이 있다면 언제든 댓글로 부탁합니다!

 

 

CSS filter 정의

흐림 효과나 색상 변형 등 그래픽 효과를 요소에 적용

보통 필터는 이미지, 배경, 테두리 렌더링을 조정하는 데 사용

 

 

filter 값 종류

filter: blur(px); // 흐림 효과 / 값이 클수록 흐려짐 / 값 지정 안 하면 

filter: brightness(%, 0.3); // 밝기 조절 / 0%: 완전한 검은색 / 100% (1): 기본값 / 100%초과: 더 밝은 이미지

filter: contrast(%); // 대비 조절 / 0%: 완전한 검은색 / 100% (1): 기본값 / 100%초과: 더 높은 대비 

filter: drop-shadow(shadow-h shadow-w blur spread color); // 그림자 적용 / shadow-h(수평그림자), shadow-w(수직그림자), blue(흐림정도), spread(번짐정도), color(그림자색상)

filter: grayscale(%); // 흑백 색상 / 0%: 기본값 / 100%: 완전한 회색 / 참고: 음수값 비허용.

filter: hue-rotate(deg); // 색상 회전 / 0deg: 기본값 / 최댓값: 360deg

filter: invert(%); // 이미지 색상 명암을 동시 반전 / 0%: 기본값 / 100%: 완전한 반전 / 참고: 음수값 비허용.	

filter: opacity(%, 0.3); // 불투명도 조절 / 0%: 완전한 투명 / 100%: 기본값 / 참고: 음수값 비허용.

filter: saturate(%); // 채도 조절 / 0: 완전한 불포화 채도 / 100%: 기본값 / 참고: 음수값 비허용.

filter: sepia(%); // 갈색(sepia)톤 변경 / 0: 기본값 / 100%: 완전한 갈색톤 / 참고: 음수값 비허용.

filter: url(); // SVG필터 지정한 XML파일위치를 취함 및 특정 필터 요소에 대한 앵커포함 가능 / ex) filter: url (svg-url # element-id)


/* 다중 값 적용 */
filter: contrast(150%) brightness(5%);

/* 필터값 없음 */
filter: none;

/* 전역값 */
filter: inherit; // 부모의 필터값을 상속받음
filter: initial; // 필터값을 기본값 or 초기화 상태로 만듬
filter: unset; // 상속값 존재 시 상속값(inherit)적용 존재 하지 않을 시 초기값(initial)적용 

/* TIP. 이미지 하얗게 만들기 */
filter: brightness(0) invert(1);

 

 

---

 

 

참고: MDN - CSS.filter