Фоновая размытость с помощью CSS

Ответ 1

Октябрь 2016 UPDATE

Поскольку свойство -moz-element(), по-видимому, широко не поддерживается другими браузерами, кроме FF, существует еще более простой способ применения размытия без ущерба для содержимого контейнера. Использование псевдоэлементов в этом случае является идеальным в сочетании с фильтром размытия svg.

Проверьте демонстрацию с использованием псевдоэлемента

(Демо тестировалось в FF v49, Chrome v53, Opera 40 - IE, похоже, не поддерживает размытие либо с помощью фильтра css, либо svg)

Единственный способ (до сих пор) иметь эффект размытия в фоновом режиме без js-плагинов - это использование свойства -moz-element() в сочетании с фильтром размытия svg. С помощью -moz-element() вы можете определить элемент как фоновое изображение другого элемента. Затем вы применяете фильтр размытия svg. ДОПОЛНИТЕЛЬНО: вы можете использовать некоторый jQuery для прокрутки, если ваш фон находится в позиции fixed.

Смотрите мою демонстрацию здесь

Я понимаю, что это довольно сложное решение и ограничено FF (element() применимо только к Mozilla в данный момент с свойством -moz-element()), но по крайней мере было некоторые усилия в прошлом для реализации в браузерах webkit и, надеюсь, он будет реализован в будущем.

Ответ 2

Вы можете использовать псевдоэлемент для размещения в качестве фона содержимого с тем же изображением, что и фон, но размыты с помощью нового фильтра CSS3.

Вы можете увидеть это в действии здесь: http://codepen.io/jiserra/pen/JzKpx

Я сделал это для настройки выбора, но добавил эффект размытия фона.

Ответ 3

С Safari 9.0 вы можете использовать свойство backdrop-filter.

HTML

<div>backdrop blur</div>

CSS

div {
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
}

или если вам нужен другой цвет фона для браузеров без поддержки:

div {
    background-color: rgba(255, 255, 255, 0.9);
}

@supports (-webkit-backdrop-filter: none) or (backdrop-filter: none) {
    div {
        -webkit-backdrop-filter: blur(10px);
        backdrop-filter: blur(10px);
        background-color: rgba(255, 255, 255, 0.5);  
    }
}

JSFiddle

Разработчик Mozilla: фоновый фильтр

Safari 9.0

Ответ 4

Существует простой и очень распространенный метод, используя 2 фоновых изображения: четкий и размытый. Вы устанавливаете четкое изображение в качестве фона для тела и размытое изображение в качестве фонового изображения для вашего контейнера. Размытое изображение должно быть установлено на фиксированное позиционирование, а выравнивание на 100% идеально. Я использовал его раньше, и он работает.

body {
    background: url(yourCrispImage.jpg) no-repeat;
}

#container {
    background: url(yourBlurryImage.jpg) no-repeat fixed;
}

Вы можете увидеть рабочий пример на следующем скрипте: http://jsfiddle.net/jTUjT/5/. Попробуйте изменить размер браузера и убедитесь, что выравнивание никогда не сработает.

Если только CSS element() поддерживался другими браузерами, отличными от Mozilla -moz-element(), вы могли бы создавать отличные эффекты. Смотрите демо с Mozilla.

Ответ 5

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

#dialog_base{
  background:white;
  background:rgba(255,255,255,0.8);

  position: absolute;
  top: 40%;
  left: 50%;
  z-index: 50;
  margin-left: -200px;
  height: 200px;
  width: 400px;

  filter:blur(4px);
  -o-filter:blur(4px);
  -ms-filter:blur(4px);
  -moz-filter:blur(4px);
  -webkit-filter:blur(4px);
}

#dialog_content{
  background: transparent;
  position: absolute;
  top: 40%;
  left: 50%;
  margin-left -200px;
  overflow: hidden;
  z-index: 51;
}

Элемент фона может находиться внутри элемента содержимого, но не наоборот.

<div id='dialog_base'></div>
<div id='dialog_content'>
    Some Content
    <!-- Alternatively with z-index: <div id='dialog_base'></div> -->
</div>

Это непросто, если контент не всегда согласован, но он работает.

Ответ 6

Вы можете сделать это через iframes... Я что-то сделал, но единственная проблема на данный момент - синхронизировать эти divs, чтобы прокручивать одновременный... его ужасный путь, потому что он, как вы загружаете 2 веб-сайта, но единственный способ, которым я нашел... вы также можете работать с divs и overflow, я думаю...

Ответ 7

В каком направлении вы хотите, чтобы он был динамичным? Если вы хотите, чтобы всплывающее окно успешно отображалось в фоновом режиме, вам необходимо создать два фонов. Для этого требуется использование element() или -moz-element() и фильтра (для Firefox используйте SVG-фильтр, например filter: url(#svgBlur), поскольку Firefox еще не поддерживает -moz-filter: blur()?). Он работает только в Firefox на момент написания.

Смотрите демо здесь

Мне все еще нужно создать простую демонстрацию, чтобы показать, как это делается. Вы можете просмотреть источник.