iOS7과 같은 흐림 효과를 배경에만 사용할 수 있습니까?

Question

나는 받아 들인 대답 this question에서 올리는 뒤에 오는 부호와 더불어 iOS7 통제 센터에서 보인 흐림 효과를 추가하는 것을 시도하고있다. 나는 위의 코드를 작성하고 응용 프로그램을 실행할 때

body { 
    -webkit-filter: blur(20px); 
    opacity: 0.4; 
} 

그러나, 모든 화면을 통해 흐림 효과를 표시하고, 따라서 내용을 읽을 수가 없습니다. 나는 배경을 오버라이드 (override) 할 필요가있는 다음 코드와 같은 접근을하려고하면 내가 있음을 의미하며, 블로그 내용 '배경 색

body { 
    background-color: red; 
} 

.blog { 
    background-color: white; 
} 

을 무시하기 때문에 단, 아래의 예는, 제대로 배경에 영향을 미치는 :

.blog { 
    -webkit-filter: blur(0px); 
    opacity: 1.0; 
} 

여전히 전체적으로 흐리게 보입니다. 그러면 그런 불화가 ​​왜 발생합니까?

배경에서만 흐리게 효과를 적용하고 싶습니다. 즉, 머리글, 바닥 글, 블로그 게시물과 같은 항목에 영향을 미치기를 원하지 않습니다 (예 : 블로그 태그 범주) -, 광고, 등 ...

나는 크롬 브라우저와 스타일러스와 부트 스트랩 3.

[업데이트]

내가 추가 배경 이미지를 사용하고자하지 않을

와 HTML 5 및 CSS 3를 사용 그냥 배경을 흐리게 만들고 싶습니다.

Answer 1

이렇게 할 수있는 몇 가지 방법이 있지만 모두 동일한 기본 단계가 포함됩니다.

흐림 효과는 배경뿐만 아니라 요소 전체에 작용하기 때문에 배경과 적용되는 효과를 포함하는 전용 요소가 필요합니다. 그런 다음 나머지 콘텐츠를 덮어 씁니다. http://jsfiddle.net/83aBP/

.background { 
    height: 100%; 
    width: 100%; 
    background: url(http://i.imgur.com/Zz5bPNl.png); 
    background-size: cover; 
    position: fixed; 
    -webkit-filter: blur(20px); 
    opacity: 0.8; 
} 

.content { 
    position: relative; 
    color: white; 
    z-index: 10; 
} 

Answer 2

은 다음과 같이 몸보다 별도의 용기에 배경을 유지 :

<div id="background"></div> 
<div id="body"></div> 

그런 다음 다음을 적용하여 아이폰 OS 7 시차 효과를 얻을 수 있습니다 여기에

내 시도 배경으로 필터링 :

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

#body { 
    color: #fff; 
    position: relative; 
    z-index: 100; 
    margin:0; 
    padding:0; 
} 

Answer 3

이 jQuery를 사용했습니다. 플러그인은 과거에 꽤 잘 작동했습니다 : http://blurjs.com/ 정확하게 당신이 찾고있는 것처럼 들립니다. 이 방법을 사용하여 백그라운드에서 내용을 흐리게하는 유일한 방법입니다.

당신이 찾고있는 것이 아닌 경우 알려 주시면 적절한 해결책을 찾을 수 있습니다.