Размытие фона с помощью CSS

Я хочу Vista / 7-эффект Аэро-стекла на всплывающем окне на моем сайте, и он должен быть динамичным. Я в порядке с этим, не будучи кросс-браузерным эффектом, пока сайт все еще работает на всех современных браузерах.

моей первой попыткой было использовать что-то вроде

css prettyprint-override">#dialog_base {
  background:white;
  background:rgba(255,255,255,0.8);

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

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

44
aero-glass css popup

7 ответов

OCT. 2016 обновление

С -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 и, надеюсь, он будет реализован в будущем.

34

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

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

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

17

начиная с 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 разработчик: фон-фильтр

CanIUse

14

существует простой и очень распространенный метод, используя 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.

8

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

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

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

1

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

1

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

посмотреть демо здесь.

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

1