기본 지원 없이 브라우저에서 CSS 배경화면 필터를 에뮬레이션하는 방법은 무엇입니까?

CSS 배경화면 필터에 대한 해결 방법

약속에도 불구하고 CSS 배경화면 필터는 최신 브라우저에서 여전히 찾기 힘든 기능입니다. Chrome 51은 실험적 웹 플랫폼 플래그를 통해 제한적인 지원을 제공하고 Safari 9.1에서는 -webkit- 접두어를 사용해야 하기 때문에 실용성은 여전히 ​​의문입니다. 다행히 기본 배경 필터 지원이 없을 때 원하는 효과를 에뮬레이트할 수 있는 해결 방법이 있습니다.

유망한 접근 방식 중 하나는 약간 투명한 배경을 대체 수단으로 사용하는 것입니다. 배경 필터를 사용할 수 없는 경우 이 투명한 배경은 눈에 띄지 않고 혼합 가능한 솔루션을 제공합니다.

그러나 배경 필터를 지원하는 브라우저의 경우 코드는 배경 투명도를 더욱 낮추고 흐림 필터. 이 조합은 배경 필터의 동작을 효과적으로 모방합니다.

이 해결 방법을 구현하려면 다음 코드를 사용하면 됩니다.

<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>

이 솔루션은 브라우저 간 호환성을 제공하여 일관된 시각적 경험을 제공합니다. 브라우저의 배경 필터 지원과 관계없이. 또한 배경 필터 지원을 통해 대체 효과와 향상된 효과를 보여주는 예도 포함되어 있습니다.

위 내용은 기본 지원 없이 브라우저에서 CSS 배경화면 필터를 에뮬레이션하는 방법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!