'배경 필터'에 의존하지 않고 흐린 유리 효과를 얻는 방법은 무엇입니까?-CSS 튜토리얼-php.cn

'배경 필터'에 의존하지 않고 흐린 유리 효과를 얻는 방법은 무엇입니까?

DDD

풀어 주다： 2024-10-27 20:03:30

원래의

653명이 탐색했습니다.

How to Achieve a Blurred Glass Effect Without Relying on `backdrop-filter`?

투명한 폴백

배경 필터 지원이 부족한 브라우저의 경우 약간의 투명한 배경은 젖빛 유리 효과를 모방할 수 있습니다. 다음 코드는 간단한 대체 기능을 제공합니다.

브라우저 지원 활용

배경 필터를 지원하는 브라우저의 경우 흐림 기능을 활용할 수 있습니다. 다음은 이 시나리오에 맞는 CSS 코드의 확장된 버전입니다.

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

로그인 후 복사

이 코드는 지원되는 브라우저에 흐린 효과가 적용되는 반면, 그렇지 않은 브라우저에 대해서는 투명 폴백이 적절하게 저하되도록 합니다.

예: 흐림 효과 보기

배경 필터를 지원하지 않으면 다음 이미지와 같이 요소가 약간 투명한 배경으로 표시됩니다.

<code class="css">/* 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>

로그인 후 복사

[이미지 삽입 투명한 대체 효과]

배경 필터 지원을 사용하면 다음 이미지에 표시된 것처럼 흐린 유리 효과가 유지됩니다.

[흐린 효과 이미지 삽입]

결론

여기에 제시된 배경화면 필터 해결 방법은 브라우저 지원에 관계없이 웹 요소에 흐릿한 유리 효과를 얻기 위한 실용적인 솔루션을 제공합니다. 우리는 미래에 백드롭 필터가 완전히 출시될 것으로 예상하고 있지만 이 기술은 사용자 경험을 향상시키기 위한 귀중한 대안을 제공합니다.

위 내용은 '배경 필터'에 의존하지 않고 흐린 유리 효과를 얻는 방법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!