Applying CSS Glass/Blur Effect to an Overlay

Q: Implementing a blur effect on a semi-transparent overlay

A web developer is facing difficulties in applying a blur effect to an overlay div, making the content behind the div appear Blurred.

이전 시도 :

개발자는 다음 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);
}

브라우저 지원 :

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