오버레이에서 CSS Glass Blur 효과를 얻는 방법은 무엇입니까?

오버레이에 CSS 유리/흐림 효과 적용

Q: 반투명 오버레이에 흐림 효과 구현

웹 개발자가 오버레이 div에 흐림 효과를 적용하여 div 뒤의 콘텐츠가 나타나게 하는 데 어려움을 겪고 있습니다. 흐리게.

이전 시도:

개발자는 다음 CSS를 사용하여 효과를 구현하려고 시도했습니다.

#overlay {
    filter:blur(4px);
    -o-filter:blur(4px);
    -ms-filter:blur(4px);
    -moz-filter:blur(4px);
    -webkit-filter:blur(4px);
}

그러나 이 접근 방식은 실패했습니다. .

개정 솔루션:

더 간단하고 현대적인 솔루션을 위해 개발자는 배경 필터 속성을 활용할 수 있습니다.

#overlay {
    backdrop-filter: blur(6px);
}

브라우저 지원:

배경 필터에 대한 브라우저 지원은 포괄적이지 않습니다. 그러나 많은 사용 사례에서 흐림 효과는 중요하지 않습니다.

위 내용은 오버레이에서 CSS Glass Blur 효과를 얻는 방법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!