CSS/CSS
[CSS] backdrop-filter
ui-o
2025. 6. 27. 16:35
반응형
backdrop-filter
- 적용된 요소의 영역만큼 원하는 필터를 적용하는 속성으로, 벤더 프리픽스와 사용 (* 사용 시 브라우저 지원 확인)
- backdrop-filter : 속성(속성단위)
| 속성 | 설명 |
| blur | - 이미지를 흐리게 함 - 예) blur(10px) - 픽셀 값이 높아질 수록 더 흐려 |
| brightness | - 밝기 조정 |
| contrast | - 색 대비 조정 - 원래 상태 100%을 기준으로 낮으면 흐려지고, 높으면 뚜렷해짐 - 대비가 높을 수록 밝은 색은 더 밝아지고, 어두운 색은 더 어둡게 표현됨 |
| saturate | - 채도 조정, 색을 얼마나 다채롭게 표현하는지 정함 - 0% : 완전히 뺀 흑백 상태 - 높을수록 더 많은 색을 사용해 진해짐 |
| grayscale | - 채도 조정 - saturate 와 반대 설정 - 100% 에 가까울 수록 흑백에 가까워 짐 - 낮을 수록 채도를 낮추는 효과 |
| invert | - 색 반전 - invert(50%) : 회색으로 됨 - 100%에 가까울수록 회색에 반전되는 색 |
| sepia | - 오래된 사진 효과 |
반응형