배경화면 필터를 사용할 수 없음: 최신 브라우저에서 흐린 배경 효과를 얻는 방법은 무엇입니까?

CSS 해결 방법: 눈에 띄지 않는 배경 필터를 위한 임시 솔루션

유망한 CSS 기능임에도 불구하고 배경 필터는 여전히 도달할 수 없습니다. 최신 브라우저용. 현재로서는 Chrome 51(실험적 웹 플랫폼 플래그 포함) 및 Safari 9.1(-webkit- 접두사 포함)만이 이에 대한 지원을 제공합니다. 불행하게도 Firefox 47은 이 측면에서 뒤쳐져 있습니다.

이러한 제한된 가용성으로 인해 개발자는 원하는 시각 효과를 달성하기 위해 대체 솔루션을 찾기 위해 애쓰게 되었습니다. 배경 필터가 보편적으로 액세스 가능해질 때까지 인기를 얻은 한 가지 해결 방법은 약간 투명한 배경을 대체로 사용하는 것입니다.

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

/* if backdrop support: very transparent and blurred */
@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>

배경 필터를 지원하는 브라우저(실험 기능이 활성화된 Safari 및 Chrome) , 이 코드는 흐린 배경 효과를 효과적으로 렌더링합니다. 지원되지 않는 브라우저의 경우 약간 투명한 배경을 제공하는 대체 역할을 합니다.

배경 필터에 대한 CSS 사양이 계속 발전함에 따라 이 해결 방법은 향후 조정이 필요할 수 있습니다. 그러나 당분간은 다양한 브라우저 플랫폼을 통해 사용자에게 원하는 시각적 경험을 제공할 수 있는 창의적인 방법을 제공합니다.

위 내용은 배경화면 필터를 사용할 수 없음: 최신 브라우저에서 흐린 배경 효과를 얻는 방법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!