요소 뒤에서 블러 및 색상 이동
지금까지 이러한 기법은 웹에서 구현하기 어려웠으며, 완벽한 꿀팁이나 해결 방법이 필요하지 않았습니다. 최근 몇 년 동안 Safari와 Edge 모두 필터 기능에 따라 전경색과 배경색을 동적으로 블렌딩하는 background-filter (또는 -webkit-backdrop-filter) 속성을 통해 이러한 기능을 제공했습니다. 이제 Chrome에서 버전 76부터 background-filter를 지원합니다.
backdrop-filter의 필터 함수 데모입니다. CodePen에서 예를 사용해 봅니다.
브라우저 지원
backdrop-filter가 지원되지 않는 경우 성능상의 이유로 폴리필 대신 이미지로 대체합니다. 아래 예시를 참고하세요.
@supports (backdrop-filter: none) {
.background {
backdrop-filter: blur(10px);
}
}
@supports not (backdrop-filter: none) {
.background {
background-image: blurred-hero.png;
}
}
기본사항
backdrop-filter속성은 요소에 하나 이상의 필터를 적용하여 요소 뒤에 있는 요소의 모양을 변경합니다.- 오버레이 요소는 최소한 부분적으로 투명해야 합니다.
- 오버레이 요소가 새로운 스택 컨텍스트를 가져옵니다.
CSS backdrop-filter은 반투명하거나 투명한 요소에 하나 이상의 효과를 적용합니다. 이해를 돕기 위해 아래 이미지를 살펴보세요.
.frosty-glass-pane {
backdrop-filter: blur(2px);
}
.frosty-glass-pane {
opacity: .9;
backdrop-filter: blur(2px);
}
왼쪽 이미지는 backdrop-filter가 사용되지 않거나 지원되지 않는 경우 겹치는 요소가 렌더링되는 방식을 보여줍니다. 오른쪽 이미지는 backdrop-filter를 사용하여 블러 효과를 적용합니다. backdrop-filter 외에 opacity도 사용합니다. opacity가 없으면 블러를 적용할 대상이 없습니다. opacity가 1 (완전히 불투명)로 설정되면 배경에 영향을 미치지 않습니다.
backdrop-filter 속성은 blur(), brightness(), contrast(), opacity(), drop-shadow() 등 즐겨 사용하는 모든 필터 함수가 지원된다는 점에서 CSS 필터와 같습니다. 또한 외부 이미지를 필터로 사용하고 none, inherit, initial, unset 키워드를 사용하려는 경우 url() 함수도 지원합니다. 구문, 필터 및 값에 대한 설명을 비롯하여 MDN에 이러한 모든 사항에 대한 설명이 있습니다.
backdrop-filter가 none 이외의 값으로 설정되면 브라우저가 새 스택 컨텍스트를 만듭니다. 포함하는 블록도 만들 수 있지만 요소에 절대 위치 및 고정 위치 하위 요소가 있는 경우에만 만들 수 있습니다.
필터를 조합하여 다채롭고 현명한 효과를 만들거나 하나의 필터만 사용하여 더 섬세하거나 정확한 효과를 얻을 수 있습니다. SVG 필터와 결합할 수도 있습니다.
예
이전에 운영 체제용으로 예약되어 있던 디자인 기법과 스타일을 이제 단일 CSS 선언으로도 충족할 수 있습니다. 몇 가지 예를 살펴보겠습니다.
단일 필터
다음 예에서는 색상과 블러를 조합하여 불투명한 효과를 낼 수 있습니다. 블러는 backdrop-filter에서 제공하는 반면 색상은 요소의 반투명 배경 색상에서 가져옵니다.
.blur-behind-me {
background-color: rgba(255, 255, 255, 0.3);
backdrop-filter: blur(.5rem);
}
다중 필터
원하는 효과를 얻으려면 여러 개의 필터가 필요한 경우도 있습니다. 이렇게 하려면 공백으로 구분된 필터 목록을 제공하세요. 예를 들면 다음과 같습니다.
.brighten-saturate-and-blur-behind-me {
backdrop-filter: brightness(150%) saturate(150%) blur(1rem);
}
다음 예에서는 네 개의 창 각각에 서로 다른 배경화면 필터 조합이 있지만 창 뒤에는 동일한 도형 집합이 애니메이션으로 표시됩니다.
오버레이
이 예에서는 페이지 배경과 스타일이 혼합되면서 텍스트를 읽을 수 있도록 반투명 배경을 흐리게 처리하는 방법을 보여줍니다.
.modal {
backdrop-filter: blur(10px);
background-color: rgba(255, 255, 255, 0.5);
}
동적 배경의 텍스트 대비
앞서 언급했듯이 backdrop-filter는 웹에서 어렵거나 불가능할 성능 기준에 부합하는 효과를 허용합니다. 애니메이션에 반응하여 배경을 변경하는 경우를 예로 들 수 있습니다. 이 예에서 backdrop-filter는 텍스트 뒤의 상황에 관계없이 텍스트와 배경의 고대비를 유지합니다. 기본 배경 색상 darkslategray로 시작하고 backdrop-filter를 사용하여 변환 후에 색상을 반전시킵니다.
.container::before {
z-index: 1;
background-color: darkslategray;
filter: invert(1);
}
.container::after {
backdrop-filter: invert(1);
z-index: 3;
}
결론
지난 몇 년 동안 560명이 넘는 개발자가 Chromium 버그에 찬성 투표를 했으며 이 버그는 오랫동안 기다렸던 CSS 기능으로 표시되었습니다. Chrome의 backdrop-filter 버전 76은 웹이 진정한 OS와 유사한 UI 프레젠테이션에 한 걸음 더 가까워졌습니다.