Ответ 1

Возможно с CSS3:

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

Пример здесь = > jsfiddle

Ответ 2

Вы заставили меня попробовать, поэтому я сделал, посмотрите пример здесь:

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

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

• HW Ускоренные фильтры CSS
• JS для присвоения классов и событий со стрелкой
• Изображения Свойство CSS Clip

что он.

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

Ответ 3

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

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

Живая демонстрация

[Изменить] Я написал более indepth сообщение на 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+ (включить "экспериментальные веб-сайты-функции" / "enable-experimental-web-platform-features" )
• Safari 6.1 Seed 6
• iOS7 (медленный и без прокрутки)

Ответ 4

Проверьте эту демонстрационную страницу.
В этой демонстрации используется html2canvas для рендеринга документа в качестве изображения.

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

• При щелчке по ссылке "Показать всплывающее окно" вызывается функция "makePopup".
• 'makePopup' запускает html2canvas для рендеринга документа как изображения.
• Изображение преобразуется в строку url-url и окрашивается как всплывающее фоновое изображение.
• Всплывающее окно bg размывается -webkit-filter: blur
• Добавить всплывающее окно в документ.
• Пока вы перетаскиваете всплывающее окно, оно меняет свое собственное фоновое положение.

Ответ 5

Это можно сделать с FireFox теперь благодаря атрибуту element.

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

• Простой наложение с твердым фоном (чтобы скрыть реальное оверлейное содержимое).
• Наложение с фоном -moz-element, который устанавливает содержимое. Обратите внимание, что FX не поддерживает атрибут filter: blur(), поэтому нам нужен SVG.
• Наложение с не размытым контентом.

Итак, составим вместе:

Фильтр размытия SVG (работает в FX, другие браузеры могут использовать filter:blur()):

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

Стиль размытия CSS:

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

Наконец, 3 слоя:

<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>

Затем, чтобы переместить это, просто установите background-position (образец в jQuery, но вы можете использовать что-либо):

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

Здесь это как скрипт JS, только FX.

Ответ 6

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

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

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

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

Ответ 7

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

Пример:

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

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

Ответ 8

вчера сделал быструю демонстрацию, которая фактически делает то, о чем вы говорите. 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);
}

Ответ 9

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

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

Ответ 10

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

Vague.js

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

Ответ 11

Я использую 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 будет выбирать только часть вашего включенного изображения, которое вы хотите.
• Просто измените фильтр на любой, какой вы хотите, например, пример Keith <feGaussianBlur stdDeviation="10"/>.
• Используйте тег <image ...>, чтобы применить его к любому изображению или даже использовать несколько изображений.
• Вы можете создать это с помощью js и использовать его как изображение или использовать id в своем css.

Ответ 12

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

Это динамически меняет фон, который выполняет только 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;
}

Ответ 13

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

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

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

Спасибо

Вот fiddle, не протестированный в 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');
    }
});