정의 및 사용 방법
backdrop-filter
속성은
요소의 배경 뒤로 비춰지는 레이어에 특정한 시각적 변화를 주는 필터를 적용할 수 있습니다.
예를 들면 흐림, 특정 색상 톤 강조, 밝기 조정 효과 등이 있습니다.
기본 예제
Example
사용법 참고 사항
backdrop-filter
속성은 요소의 배경 뒤로 비춰지는 레이어에 시각 효과를 적용합니다. 따라서 요소의 배경이 비춰질 수 있도록 투명하거나 반투명하게 설정되어 있어야 합니다.
backdrop-filter
속성이 적용되려면
- 요소의 배경색이 없거나 완전히 투명하게 설정하면 적용이 됩니다.
- 요소의 배경색이 있더라도 반투명하게 설정하면 적용이 됩니다.
- 요소에 배경 이미지가 전체를 덮고 있다면 배경 이미지 자제가 투명하거나 반투명해야 적용이 됩니다.
- 요소 자체를
opacity
속성으로 투명도를 조정하더라도 아무런 효과가 없습니다. 오직 배경을 통해 뒤쪽 레이어가 비춰질 때만 작동합니다.
형식 구문
selector {
backdrop-filter: none | <filter>
}
구문
/* 키워드 값 */
backdrop-filter: none;
/* 단일한 <filter> 값 */
backdrop-filter: blur(5px);
backdrop-filter: brightness(60%);
backdrop-filter: contrast(40%);
backdrop-filter: drop-shadow(4px 4px 10px blue);
backdrop-filter: grayscale(30%);
backdrop-filter: hue-rotate(150deg);
backdrop-filter: invert(70%);
backdrop-filter: opacity(20%);
backdrop-filter: sepia(90%);
backdrop-filter: saturate(80%);
backdrop-filter: url(common-filters.svg#filterid); /* SVG 필터 URL */
/* 여러 개의 값 */
backdrop-filter: blur(4px) saturate(150%);
backdrop-filter: blur(4px) saturate(150%) grayscale(30%);
backdrop-filter: url(common-filters.svg#filterid) blur(4px);
/* 글로벌 값 */
backdrop-filter: inherit;
backdrop-filter: initial;
backdrop-filter: revert;
backdrop-filter: revert-layer;
backdrop-filter: unset;
값
none |
초깃값임.
어떤 필터 효과도 적용하지 않습니다. |
---|---|
<filter> |
하나 이상의 필터 함수를 공백으로 나열합니다.
아래의 'CSS 필터 함수 목록'을 참조하세요. |
CSS 필터 함수 목록
함수 | 필터 | 매개변수 유형 | 기본값, 최솟값, 최댓값 |
---|---|---|---|
blur() |
흐림 효과 | 길이 단위 | 기본값: blur(0) ,
최솟값: blur(0) ,
최댓값: 제한 없음 |
brightness() |
밝기 조정 | 숫자 또는 백분율 | 기본값: brightness(1) 또는 brightness(100%) ,
최솟값: brightness(0) 또는 brightness(0%) ,
최댓값: 제한 없음 |
contrast() |
대비 조정 | 숫자 또는 백분율 | 기본값: contrast(1) 또는 contrast(100%) ,
최솟값: brightness(0) 또는 contrast(0%) ,
최댓값: 제한 없음 |
drop-shadow() |
그림자 효과 | 그림자 값
(shadow syntax) |
기본값: drop-shadow(0 0 0 currentcolor) ,
최솟값: 제한 없음, 최댓값: 제한 없음 |
grayscale() |
흑백 효과 | 숫자 또는 백분율 | 기본값: grayscale(0) 또는 grayscale(0%) ,
최솟값: grayscale(0) 또는 grayscale(0%) ,
최댓값: grayscale(1) 또는 grayscale(100%) |
hue-rotate() |
색상 회전 | 각도 단위
(deg, grad, rad, turn) |
기본값: hue-rotate(0deg) ,
최솟값: 제한 없음, 최댓값: 제한 없음 |
invert() |
색상 반전 | 숫자 또는 백분율 | 기본값: invert(0) 또는 invert(0%) ,
최솟값: invert(0) 또는 invert(0%) ,
최댓값: invert(1) 또는 invert(100%) |
opacity() |
투명도 조정 | 숫자 또는 백분율 | 기본값: opacity(1) 또는 opacity(100%) ,
최솟값: opacity(0) 또는 opacity(0%) ,
최댓값: opacity(1) 또는 opacity(100%) |
saturate() |
채도 조정 | 숫자 또는 백분율 | 기본값: saturate(1) 또는 saturate(100%) ,
최솟값: saturate(0) 또는 saturate(0%) ,
최댓값: 제한 없음 |
sepia() |
세피아 효과 | 숫자 또는 백분율 | 기본값: sepia(0) 또는 sepia(0%) ,
최솟값: sepia(0) 또는 sepia(0%) ,
최댓값: sepia(1) 또는 sepia(100%) |
url() |
SVG 필터 적용 | 필터가 정의된
SVG 파일의 URL 참조 |
필터 함수 값에 대한 추가 설명
- 필터 함수가 최솟값을 갖는 경우, 최솟값 이하의 값을 설정하면
backdrop-filter
전체 선언이 무효 처리됩니다. - 최댓값을 초과하는 값은 문법상 허용되지만, 실제 효과는 최댓값을 설정한 것과 동일하게 적용됩니다. 예를 들어,
sepia(400%)
는sepia(100%)
와 동일한 효과를 냅니다. - 기본값을 지정하면 필터 효과가 적용되지 않은 초기 상태의 값이라는 의미입니다.
형식 정의
초깃값 | none |
---|---|
적용 요소 | 모든 요소. SVG에서는 <defs> 요소와 모든 그래픽 요소가 없는 컨테이너 요소에 적용됩니다 |
상속 | 아니오 |
애니메이션 |
|
활용 예제
backdrop-filter
속성을 자주 사용하는 두 개의 활용 예제를 살펴봅니다.
- 페이지를 스크롤할 때 상단 고정 헤더(sticky header)의 배경에 적용하는
backdrop-filter
속성 <dialog>
의::backdrop
에 적용된 모달 오버레이에 적용하는backdrop-filter
속성
상단 고정 헤더
.sticky-header {
position: sticky;
top: 0;
height: 70px;
background-color: rgba(255, 255, 255, 0.45);
border-bottom: 1px solid #fff;
backdrop-filter: blur(40px);
}
<header class="sticky-header">Sticky Header</header>
<main>
<!-- Content... -->
</main>
모달 오버레이
dialog::backdrop {
background-color: rgba(0, 0, 0, 0.1);
backdrop-filter: blur(4px);
}
<h4>모달 오버레이</h4>
<p>'대화 상자 열기' 버튼을 클릭하세요!</p>
<dialog id="my-dialog">
<p>이것은 대화 상자입니다.</p>
<button id="close-btn" type="button" autofocus>대화 상자 닫기</button>
</dialog>
<button id="open-btn" type="button">대화 상자 열기</button>
const dialog = document.getElementById("my-dialog");
const showButton = document.getElementById("open-btn");
const closeButton = document.getElementById("close-btn");
// "대화 상자 열기" 버튼을 클릭하면 대화 상자가 모달 형식으로 엽니다.
showButton.addEventListener("click", () => {
dialog.showModal();
});
// "대화 상자 닫기" 버튼을 클릭하면 대화 상자를 닫습니다.
closeButton.addEventListener("click", () => {
dialog.close();
});
모달 오버레이
'대화 상자 열기' 버튼을 클릭하세요!
브라우저 호환성
속성 |
데스크탑 Chrome
|
데스크탑데스크탑 Edge
|
데스크탑 Firefox
|
Safari
|
---|---|---|---|---|
backdrop-filter
|
76 | 79 | 103 | 18 |
명세서
명세서 사양 | |
---|---|
backdrop-filter
|
Filter Effects Module Level 2 #BackdropFilterProperty |