CSS를 사용하여 흐린 반투명 오버레이를 어떻게 만들 수 있습니까?

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

문제:

배경이 흐릿한 반투명 오버레이 div로 뒤에 있는 요소를 흐리게 만듭니다. 그러나 필터 효과가 있는 현재 CSS 코드는 원하는 결과를 생성하지 못합니다.

CSS:

#overlay {
    position: absolute;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;

    background:black;
    background:rgba(0,0,0,0.8);

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

해결책:

원하는 효과를 얻으려면 대신에 background-filter CSS 속성을 사용해 보세요. 이 방법은 더 간단하며 더 나은 브라우저 간 지원을 제공합니다.

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

참고: 배경 필터에 대한 브라우저 지원은 보편적이지 않지만 대부분의 최신 브라우저에서 작동합니다. 흐림이 필수적이지 않은 경우 이 대안이 안정적인 솔루션을 제공할 수 있습니다.

위 내용은 CSS를 사용하여 흐린 반투명 오버레이를 어떻게 만들 수 있습니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!