CSS를 사용하여 iOS 7의 흐림 효과를 복제하는 방법은 무엇입니까?

CSS를 사용한 iOS 7의 흐림 효과: 자세히 살펴보기

Apple의 iOS 7에서는 시각적으로 매력적인 흐림 오버레이 효과를 도입했습니다. 단순한 투명성 문제처럼 보일 수 있지만 이 효과에는 눈에 보이는 것 이상의 의미가 있습니다.

질문: CSS를 사용하고 필요한 경우 JavaScript를 사용하여 이 효과를 어떻게 복제할 수 있습니까?

답변:

CSS 3은 이 효과를 달성하기 위한 솔루션을 제공합니다.

<code class="css">#myDiv {
    -webkit-filter: blur(20px);
    -moz-filter: blur(20px);
    -o-filter: blur(20px);
    -ms-filter: blur(20px);
    filter: blur(20px);
    opacity: 0.4;
}</code>

blur() 필터는 이미지에 흐림 효과를 추가합니다. 요소이며 불투명도 속성은 투명도를 제어합니다. 효과를 미세 조정하려면 흐림() 및 불투명도에 대해 다양한 값을 실험해 보세요.

예:

JSFiddle에서 이 코드의 실제 예제를 살펴보세요.

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