CSS로 iOS 7의 흐릿한 오버레이 효과를 재현하는 방법은 무엇입니까?

CSS로 iOS 7의 흐릿한 오버레이 효과 재현

iOS 7에서는 특정 요소에 깊이와 시각적 흥미를 더하는 뚜렷한 흐릿한 오버레이 효과를 도입했습니다. 이 효과는 투명도와 흐림 필터를 결합하여 얻을 수 있습니다. 처음에는 Apple 플랫폼에만 적용되었지만 이제는 CSS 및 선택적으로 JavaScript를 사용하여 복제할 수 있습니다.

효과: 투명도 그 이상

iOS 흐림 효과는 단순한 투명도를 뛰어넘습니다. 기본 콘텐츠를 부드럽게 만드는 미묘한 흐림 효과입니다. 이 효과는 iOS 제어 센터에 표시되는 볼륨 및 밝기 오버레이에서 특히 두드러집니다.

CSS 솔루션

다행히 최신 CSS는 filter 속성을 ​​지원합니다. blur() 함수를 사용하여 원하는 효과를 얻을 수 있습니다. 다음 코드는 CSS를 사용하여 흐림 효과를 생성하는 방법을 보여줍니다.

#myDiv {
    -webkit-filter: blur(20px);
    -moz-filter: blur(20px);
    -o-filter: blur(20px);
    -ms-filter: blur(20px);
    filter: blur(20px);
    opacity: 0.4;
}

이 코드는 지정된 요소에 20픽셀 흐림 필터를 적용하고 불투명도를 40%로 줄입니다. 흐림 필터는 브라우저별로 다르므로 브라우저 간 호환성을 보장하기 위해 여러 공급업체 접두사가 사용됩니다.

실시간 예제

효과가 실제로 작동하는 모습을 보려면 다음 JSFiddle 데모를 확인하세요. [JSFiddle 데모](https://jsfiddle.net/e5m5efrw/embedded/)

위 내용은 CSS로 iOS 7의 흐릿한 오버레이 효과를 재현하는 방법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!