브라우저 간 호환성을 유지하면서 CSS를 사용하여 동적 팝업에 대해 Vista/Windows 7 Aero Glass 흐림 효과를 얻으려면 어떻게 해야 합니까?

콘텐츠에 영향을 주지 않고 CSS를 사용하여 배경을 흐리게 처리

질문:

웹사이트의 동적 팝업의 경우 Vista/Windows 7의 Aero Glass와 유사한 배경 흐림 효과. 최신 브라우저와의 호환성을 유지하면서 CSS에서 이를 어떻게 달성할 수 있습니까?

답변:

업데이트(2016년 10월):

향상된 기술은 의사 요소와 SVG 흐림 필터를 활용합니다. 아래 데모를 참조하세요.

[데모: 배경 흐림에 의사 요소 사용](demo-link)

이 접근 방식은 흐림을 지원하지 않는 IE를 제외하고 크로스 브라우저에서 작동합니다. CSS 또는 SVG 필터를 통해.

원래 답변(2016년 10월 이전):

-moz-element() 및 SVG 흐림 필터 사용:

1. 한 요소를 다른 요소의 배경 이미지로 정의하려면 -moz-element() 속성을 사용하세요.
2. 배경 이미지에 SVG 흐림 필터를 적용하세요.
3. 선택적으로 배경 위치가 고정된 경우 스크롤에 jQuery를 활용합니다.

여기에서 데모를 확인하세요.

[데모: -moz- 사용 배경 흐림용 element()](demo-link)

제한:

이 방법은 -moz-element() 사용으로 인해 Firefox로 제한됩니다. 현재 Mozilla에서만 지원됩니다. 하지만 이를 웹킷 브라우저에 구현하려는 노력이 있어 향후 지원이 기대된다.

위 내용은 브라우저 간 호환성을 유지하면서 CSS를 사용하여 동적 팝업에 대해 Vista/Windows 7 Aero Glass 흐림 효과를 얻으려면 어떻게 해야 합니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!