이전 브라우저에서도 CSS를 사용하여 배경 흐림 효과를 만드는 방법은 무엇입니까?

CSS: Background-Filter Polyfill

요소의 배경에 흐림 및 기타 효과를 가능하게 하는 CSS 기능인 Backdrop-filter는 그대로 유지됩니다. 최신 브라우저에서는 대부분 지원되지 않습니다. 대안으로 약간 투명한 배경을 대체용으로 사용하는 것이 좋습니다.

<code class="css">.backdrop-blur {
  background-color: rgba(255, 255, 255, .9);
}

@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);
  }
}</code>

이 코드는 배경 필터 지원이 부족한 브라우저에 투명한 대체를 제공하는 동시에 지원되는 브라우저에서 흐린 효과를 활성화합니다. CSS는 또한 접두사가 없는 배경 필터 지원을 도입할 수 있는 향후 CSS 개정을 허용합니다.

시각화:

[배경 필터 지원이 없는 투명 대체 이미지] [이미지 배경 필터 지원을 통한 흐린 효과]

위 내용은 이전 브라우저에서도 CSS를 사용하여 배경 흐림 효과를 만드는 방법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!