CSS 배경 필터를 사용하여 유리 효과 오버레이를 어떻게 만들 수 있나요?

오버레이에서 CSS를 사용하여 유리 효과를 얻는 방법

CSS에서 흐릿한 오버레이를 만드는 것은 기존의 흐림 필터가 할 수 없는 것처럼 어려운 일입니다. 오버레이 아래의 콘텐츠를 흐리게 하지 마십시오. 그러나 이 문제에 대한 현대적인 해결책이 있습니다.

'Backdrop-Filter' 사용

'backdrop-filter' 속성은 흐림 효과를 적용하는 새로운 방법을 소개합니다. CSS. 기본 콘텐츠를 포함하여 요소 외부 영역을 흐리게 할 수 있습니다. 이를 사용하려면 오버레이용 CSS에서 간단히 정의하세요.

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

브라우저 지원

'backdrop-filter'는 현대적인 속성이지만 Chrome, Firefox, Edge, Safari 및 Opera를 포함한 주요 브라우저에서 우수한 지원을 제공합니다. 단, 브라우저마다 블러 효과의 품질에 약간의 차이가 있을 수 있다는 점 참고하시기 바랍니다.

위 내용은 CSS 배경 필터를 사용하여 유리 효과 오버레이를 어떻게 만들 수 있나요?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!