вы заставили меня хотеть попробовать, так что я сделал, проверить пример здесь:

http://codepen.io/Edo_B/pen/cLbrt

использование:

1. HW ускоренные CSS фильтры
2. JS для присвоения класса и событий со стрелками
3. изображения CSS Clip property

вот именно.

Я также считаю, что это можно сделать динамически для любого экрана, если использовать холст для копирования текущего dom и размытия оно.

[редактирование] В будущем (мобильном) Safari 9 будет -webkit-backdrop-filter именно для этого. Смотрите этой перо я сделал, чтобы продемонстрировать его.

Я думал об этом в течение последних 4 недель и придумал это решение.

Демо

[редактирование] Я написал более глубокий пост на CSS-трюки

этот метод использует области CSS таким образом, поддержка браузера не является лучшим в этом момент. (http://caniuse.com/#feat=css-regions)

ключевой частью этого метода является разделение содержимого от макета с помощью области CSS. Сначала определить .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) the .content чтобы гарантировать, что контент всегда будет течь, хотя .header__background. Это преобразование при этом всегда скрывает некоторое содержимое под заголовком. Исправить это это легкость добавления

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

для размещения для преобразования.

это в настоящее время работает в:

• хром 29+ (позволяют экспериментально-в WebKit-услуги'/'включить-опытно-веб-платформа-особенности')
• Safari 6.1 Seed 6
• iOS7 (медленно и без прокрутки)

это своего рода возможно с FireFox теперь благодаря элемент стиль.

этот экспериментальный атрибут позволяет использовать любое содержимое HTML в качестве фонового изображения. Итак, для создания фона вам понадобятся три оверлея:

1. простое наложение с твердым фоном (чтобы скрыть реальное содержимое наложения).
2. оверлея с -moz-element фон, который задает содержание. Обратите внимание, что FX не поддерживает

проверьте эту демо-страницу.
Эта демонстрация использует html2canvas для рендеринга документа в виде изображения.

http://blurpopup.labs.daum.net/

1. при нажатии на ссылку "Показать всплывающее окно" вызывается функция "makePopup".
2. 'makePopup' работает html2canvas для отображения документа в виде изображения.
3. изображение преобразуется в строку data-url и окрашивается как всплывающее окно фоновое изображение.
4. всплывающее окно bg размыто - webkit-filter: blur
5. добавить всплывающее окно в документ.
6. пока вы перетаскиваете всплывающее окно, оно меняет свое собственное фоновое положение.

эта ручка, которую я нашел на днях, казалось, делала это красиво, просто немного css и 21 строк javascript. Я не слышал о команде cloneNode js, пока не нашел это, но он полностью работал для того, что мне нужно точно.

http://codepen.io/rikschennink/pen/zvcgx

подробно: О. В основном он смотрит на ваш контент div и вызывает cloneNode на нем, поэтому он создает дубликат, который затем помещает внутри объекта overflow: hidden header, сидящего на верхней части страницы. B. Затем он просто прослушивает прокрутку, чтобы оба изображения, казалось, совпадали и размывали изображение заголовка... annnnd BAM. Эффект достигнут.

Не совсем полностью выполнимо в CSS, пока они не получат капелькой возможности написания скриптов для встроенного в язык.

• клонировать элемент, который вы хотите, чтобы размыть
• добавьте его к элементу, который вы хотите быть сверху (матовое окно)
• размытие клонированного элемента с помощью webkit-filter
• убедитесь, что клонированный элемент, позиционированный абсолютно
• при прокрутке родителя исходного элемента, поймать scrollTop и scrollLeft
• используя requestAnimationFrame, теперь установите динамическое преобразование webkit для translate3d со значениями x и y в scrollTop и scrollLeft

пример здесь:

• обязательно откройте в webkit-браузере
• прокрутка внутри вида телефона(лучше всего с помощью мыши apple...)
• см. размытие нижнего колонтитула в действии

http://versie1.com/TEST/ios7/

вчера сделал быструю демонстрацию, которая на самом деле делает то, о чем вы говорите. http://bit.ly/10clOM9 эта демонстрация делает параллакс на основе акселерометра, поэтому он лучше всего работает на самом iPhone. Я в основном просто копирую содержимое, которое мы накладываем в элемент фиксированной позиции, который размывается.

Примечание: проведите вверх, чтобы увидеть панель.

(я использовал ужасные CSS id, но вы поняли идею)

#frost{
 position: fixed; 
 bottom: 0; 
 left:0; 
 width: 100%; 
 height: 100px; 
 overflow: hidden;
 -webkit-transition: all .5s;
}
#background2{
 -webkit-filter: blur(15px) brightness(.2);
}

#content2fixed{
 position: fixed;
 bottom: 9px;
 left: 9px;
 -webkit-filter: blur(10px);
}

Я не очень уверен в этом, я считаю, что CSS не способен сделать это в данный момент

однако Крис Койер написал в блоге о старой технике с несколькими изображениями для достижения такого эффекта,http://css-tricks.com/blurry-background-effect/

проверьте это один из http://codepen.io/GianlucaGuarini/pen/Hzrhf Похоже, он делает эффект без дублирования фонового изображения элемента под себя. См. раздел размытие текстов также в Примере.

расплывчато.js

var vague = $blurred.find('iframe').Vague({
  intensity:5 //blur intensity
});
vague.blur();

Я использую фильтры svg для достижения аналогичных эффектов для спрайтов

<svg id="gray_calendar" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 48 48 48">
  <filter id="greyscale">
    <feColorMatrix type="saturate" values="0"/>
  </filter>
  <image width="48" height="10224" xlink:href="tango48i.png" filter="url(#greyscale)"/>
</svg>

• атрибут viewBox выберет только ту часть вашего включенного изображения, которую вы хотите.
• просто измените фильтр на любой, который вы хотите, например, Кит <feGaussianBlur stdDeviation="10"/> пример.
• использовать <image ...> тег, чтобы применить его к любому изображению или даже использовать несколько изображений.
• вы можете создать это с помощью js и использовать его в качестве изображения или использовать идентификатор в своем стиль CSS.

Это может помочь вам!!

это динамически изменяет фон только IOS делает

.myBox {
  width: 750px;
  height: 500px;
  border: rgba(0, 0, 0, 0.5) 1px solid;
  background-color: #ffffff;
}

.blurBg {
  width: 100%;
  height: 100%;
  overflow: hidden;
  z-index: 0;
}

.blurBg img {
  -webkit-filter: blur(50px);
  margin-top: -150px;
  margin-left: -150px;
  width: 150%;
  opacity: 0.6;
}

вот мой взгляд на это с jQuery. Решение не является универсальным, то есть нужно было бы настроить некоторые позиции и вещи в зависимости от фактического дизайна.

В основном то, что я сделал: на триггере клонировать/удалить весь фон (что должно быть размыто) в контейнер с незамутненным содержимым (который, необязательно, имеет скрытое переполнение, если он не является полной шириной) и правильно его расположить. Предостережение заключается в том, что при изменении размера окна размытый div будет несоответствовать оригиналу с точки зрения положение, но это можно было бы решить с помощью некоторых функций изменения размера окна (честно говоря, я не мог беспокоиться об этом сейчас).

Я был бы очень признателен за Ваше мнение об этом решении!

спасибо

здесь скрипка, не проверено в IE.

HTML

<div class="slide-up">
<div class="slide-wrapper">
    <div class="slide-background"></div>
    <div class="blured"></div>
    <div class="slide-content">
         <h2>Pop up title</h2>

        <p>Pretty neat!</p>
    </div>
</div>
</div>
<div class="wrapper">
<div class="content">
     <h1>Some title</h1>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque molestie magna elit, quis pulvinar lectus gravida sit amet. Phasellus lacinia massa et metus blandit fermentum. Cras euismod gravida scelerisque. Fusce molestie ligula diam, non porta ipsum faucibus sed. Nam interdum dui at fringilla laoreet. Donec sit amet est eu eros suscipit commodo eget vitae velit.</p>
</div> <a class="trigger" href="#">trigger slide</a>

</div>
<svg version="1.1" xmlns="http://www.w3.org/2000/svg">
<filter id="blur">
    <feGaussianBlur stdDeviation="3" />
</filter>
</svg>

CSS

body {
margin: 0;
padding: 0;
font-family:'Verdana', sans-serif;
color: #fff;
}
.wrapper {
position: relative;
height: 100%;
overflow: hidden;
z-index: 100;
background: #CD535B;
}
img {
width: 100%;
height: auto;
}
.blured {
top: 0;
height: 0;
-webkit-filter: blur(3px);
-moz-filter: blur(3px);
-ms-filter: blur(3px);
filter: blur(3px);
filter: url(#blur);
filter:progid:DXImageTransform.Microsoft.Blur(PixelRadius='3');
position: absolute;
z-index: 1000;
}
.blured .wrapper {
position: absolute;
width: inherit;
}
.content {
width: 300px;
margin: 0 auto;
}
.slide-up {
top:10px;
position: absolute;
width: 100%;
z-index: 2000;
display: none;
height: auto;
overflow: hidden;
}
.slide-wrapper {
width: 200px;
margin: 0 auto;
position: relative;
border: 1px solid #fff;
overflow: hidden;
}
.slide-content {
z-index: 2222;
position: relative;
text-align: center;
color: #333333;
}
.slide-background {
position: absolute;
top: 0;
width: 100%;
height: 100%;
background-color: #fff;
z-index: 1500;
opacity: 0.5;
}

jQuery

// first just grab some pixels we will use to correctly position the blured element
var height = $('.slide-up').outerHeight();
var slide_top = parseInt($('.slide-up').css('top'), 10);
$wrapper_width = $('body > .wrapper').css("width");
$('.blured').css("width", $wrapper_width);

$('.trigger').click(function () {
    if ($(this).hasClass('triggered')) { // sliding up
        $('.blured').animate({
            height: '0px',
            background: background
        }, 1000, function () {
            $('.blured .wrapper').remove();
        });
        $('.slide-up').slideUp(700);
        $(this).removeClass('triggered');
    } else { // sliding down
        $('.wrapper').clone().appendTo('.blured');
        $('.slide-up').slideDown(1000);
        $offset = $('.slide-wrapper').offset();
        $('.blured').animate({
            height: $offset.top + height + slide_top + 'px'
        }, 700);
        $('.blured .wrapper').animate({
            left: -$offset.left,
            top: -$offset.top
        }, 100);
        $(this).addClass('triggered');
    }
});