CSS: 사용할 수 없는 배경 필터에 대한 대안 제공

CSS의 배경 필터 기능은 대부분의 최신 브라우저에서 여전히 액세스할 수 없습니다. 향후 지원을 기대하는 동안 대체 솔루션을 찾는 것이 필수적입니다.

유사한 효과를 얻는 한 가지 방법은 미묘한 투명도가 있는 배경을 사용하는 것입니다. 아래 CSS 코드는 이 접근 방식을 보여줍니다.

/* Slightly transparent fallback */
.backdrop-blur {
  background-color: rgba(255, 255, 255, .9);
}

/* Blurred effect with backdrop support */
@supports ((-webkit-backdrop-filter: none) or (backdrop-filter: none)) {
  .backdrop-blur {
    background-color: rgba(255, 255, 255, .5);
    -webkit-backdrop-filter: blur(2em);
    backdrop-filter: blur(2em);
  }
}

배경 필터가 지원되지 않는 경우 약간 투명한 배경이 대체 역할을 합니다. 배경 필터를 지원하는 브라우저는 흐린 효과를 표시합니다.

배경 필터 지원이 없는 효과와 지원이 있는 효과를 보여주는 샘플이 아래에 제공됩니다.

[투명 대체 이미지]
[ 흐린 이미지]

이 전략을 채택하면 기본 배경화면 필터 기능이 없는 브라우저에서도 요소에 시각적으로 매력적인 필터를 통합할 수 있습니다.