[편집] 미래 (모바일) Safari 9에는 -webkit-backdrop-filter정확히이 기능이 있을 것 입니다. 참조 이제가 보여 드리기 위해 만든 펜을 .

나는 지난 4 주 동안 이것에 대해 생각 하고이 솔루션을 생각해 냈습니다.

라이브 데모

[편집] CSS-Tricks 에 대해 더 깊이있는 글을 썼습니다

이 기술은 CSS 지역을 사용 하므로 현재 브라우저 지원이 최고가 아닙니다. ( http://caniuse.com/#feat=css-regions )

이 기술의 핵심은 CSS Region을 사용하여 컨텐츠를 레이아웃에서 분리하는 것입니다. 먼저 .content요소를 정의한 flow-into:content다음 적절한 구조를 사용하여 머리글을 흐리게합니다.

레이아웃 구조 :

<div class="phone">
 <div class="phone__display">
  <div class="header">
    <div class="header__text">Header</div>
    <div class="header__background"></div>
  </div>
  <div class="phone__content">
  </div>
 </div>
</div>

이 레이아웃의 두 가지 중요한 부분이 있습니다 .header__background및.phone__content – 이러한 내용이 비록 흐름을해야하는 컨테이너입니다.

CSS 지역을 사용하면 다음과 같이 간단합니다 flow-from:content( .content이름이 지정된 지역으로 유입됩니다 content)

이제 까다로운 부분이 있습니다. .header__background콘텐츠가 흐려지는 부분이기 때문에 항상 콘텐츠를 흐르게하고 싶습니다 . (사용 webkit-filter:blur(10px);)

이는하여 수행됩니다 내용이 항상 있지만 유입 될 수 있도록 . 이 변환은 항상 헤더 아래에 일부 내용을 숨 깁니다. 이것을 고치는 것은 쉬운 추가입니다transfrom:translateY(-$HeightOfTheHeader).content.header__background

.header__background:before{
  display:inline-block;
  content:'';
  height:$HeightOfTheHEader
}

변환을 수용합니다.

이것은 현재 일하고 있습니다 :

• Chrome 29 이상 ( ‘experimental-webkit-features’/ ‘enable-experimental-web-platform-features’사용)
• 사파리 6.1 씨앗 6
• iOS7 ( 느리게 스크롤 없음 )

답변

<svg>
  <defs>
    <filter id="svgBlur">
      <feGaussianBlur stdDeviation="10"/>
    </filter>
  </defs>
</svg>

.behind-blur
{
    filter         : url(#svgBlur);
    opacity: .4;
    background: -moz-element(#content);
    background-repeat: no-repeat;
}

<div class="header" style="background-color: #fff">&nbsp;</div>
<div class="header behind-blur">&nbsp;</div>
<div class="header">
    Header Text, content blurs behind
</div>

$('.behind-blur').css({
    'background-position': '-' + left + 'px -' + top + 'px'
});