CSS filter을 정리하면서

 

 

filter

/* SVG 필터를 가리키는 URL */
filter: url("filters.svg#filter-id");

/* <filter-function> 값 */
filter: blur(5px); // 흐림처리
filter: brightness(0.4); // 밝음 처리
filter: contrast(200%); // 색 대비
filter: drop-shadow(16px 16px 20px blue); // (x축거리 y축거리, 그림자의 흐림정도)로 그림자의 표현
filter: grayscale(50%); // 회색빛으로
filter: hue-rotate(90deg); // 원형의 색상표를 기준으로 각도로 지정
filter: invert(75%); // 요소의 색상을 반전시킴
filter: opacity(25%); // 투명도
filter: saturate(30%); // 이미지의 채도
filter: sepia(60%); // 세피아톤, 오래된 사진, 바랜 색

/*여러가지 필터 속성을 띄어쓰기로 동시에 적용 가능*/

 

 

backdrop-filter

/* 키워드 값 */
backdrop-filter: none;

/* SVG 필터를 가리키는 URL */
backdrop-filter: url(commonfilters.svg#filter);

/* <filter-function> 값 */
backdrop-filter: blur(2px);
backdrop-filter: brightness(60%);
backdrop-filter: contrast(40%);
backdrop-filter: drop-shadow(4px 4px 10px blue);
backdrop-filter: grayscale(30%);
backdrop-filter: hue-rotate(120deg);
backdrop-filter: invert(70%);
backdrop-filter: opacity(20%);
backdrop-filter: sepia(90%);
backdrop-filter: saturate(80%);

/* 다중 필터 */
backdrop-filter: url(filters.svg#filter) blur(4px) saturate(150%);

/* 전역 값 */
backdrop-filter: inherit;
backdrop-filter: initial;
backdrop-filter: unset;

 

-backdrop filter은 요소가 배경에 보여지는 영역에 filter효과를 적용한다.

-단점은 익스플로어나 파이어폭스에서는 적용이 되지않는다.