[ CSS ] filter vs backdrop-filter ( 요소 배경에)

/* 필터 없음 */

- filter: none;

/* SVG 필터를 가리키는 URL */

- filter: url("filters.svg#filter-id");

/* <filter-function> 값 */

- filter: blur(0px);

- filter: brightness(1.0);

- filter: contrast(100%);

0%일 경우 완전히 회색 이미지가 되고, 100%일 경우 이미지가 그대로 유지

- filter: drop-shadow(16px 16px 10px black);

( <offset-x> <offset-y> <blur-radius> <color >

box-shadow 속성과 비슷하지만, 일부 브라우저에서는 필터를 사용했을 때 성능 향상을 위해 하드웨어 가속을 사용한다

보통 blur은 10% 이하로 사용한다

- filter: grayscale(0%);

100%일 경우 완전히 흑백 이미지가 되고, 0%일 경우 이미지가 그대로 유지

- filter: hue-rotate(0deg);

주어진 이미지에 색조 회전을 적용합니다. angle 값은 입력 샘플을 조절할 색상환 각도입니다. 0deg일 경우 이미지가 그대로 유지됩니다. 보간 시 누락 값은 0입니다. 최댓값이 존재하지는 않지만, 360deg 이상의 값은 0deg와 360deg 사이를 순환합니다.

- filter: invert(0%);

100%일 경우 색을 정반대로 바꾸고, 0%일 경우 이미지를 그대로 유지

filter: opacity(100%);

0%일 경우 완전히 투명해지고, 100%일 경우 이미지를 그대로 유지

opacity 속성과 비슷하지만, 일부 브라우저에서는 필터를 사용했을 때 성능 향상을 위해 하드웨어 가속을 사용한다

filter: saturate(100%);

0%일 경우 완전히 무채색이 되고, 100%일 경우 이미지를 그대로 유지

100%보다 큰 값도 허용되며, 이때는 원본보다 채도가 큰 이미지를 생성

filter: sepia(0%);

100%일 경우 완전히 세피아가 되고, 0%에서는 이미지를 그대로 유지

/* 다중 값 */

filter: contrast(175%) brightness(3%);

/* 전역 값 */

filter: inherit;

filter: initial;

filter: unset;

https://codepen.io/www-r/pen/VwBeBZr