CSS filter속성

2022.04.12

CSS filter

• filter속성(흐림효과, 색상변형 등)은 요소에 대한 시각적 효과를 지정함
  포토샵에서의 layer style 보정하는 것과 비슷함

종류	설명
blur(px)	이미지에 흐름효과. 값이 클수록 더 흐려짐
brightness(%)	이미지 밝기 조정. 0%는 완전히 검게, 100%(기본값)보다 크면 더 밝게
contrast(%)	이미지 대비 조정. 0%는 완전히 검게, 100%(기본값)보다 크면 더 많은 대비 처리
drop-shadow (x y blur 색상)	이미지에 그림자 효과 지정. x, y그림자 위치지정, blur는 흐림정도, 색상은 그림자 색상
grayscale(%)	이미지를 회색으로 변환. 0%(기본값), 100%는 이미지를 완전 회색 처리
hue-rotate(deg)	이미지 색조 회전을 적용 0deg~360deg
invert(%)	이미지 색상 반전. 0%(기본값), 100%는 이미지 색상 완전 반전
opacity(%)	이미지 투명도. 0%~100%(기본값)
saturate(%)	이미지 채도 지정. 0%는 채도 없애고 100%(기본값)를 초과하면 채도높임
sepia(%)	이미지를 세피아톤으로 변환(오래된사진느낌). 0%(기본값)~100%
backdrop-filter	요소 범위만 blur처리
filter	다중값 지정. 값 처리는 띄어쓰기로