Можно ли использовать iOS7-подобный эффект размытия только на фоне?

0

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

body {
    -webkit-filter: blur(20px);
    opacity: 0.4;
}

Однако, когда я написал вышеприведенный фрагмент и запустил приложение, он отображает эффект размытия по всему экрану, и, следовательно, содержимое там не читается. Однако приведенный ниже пример влияет только на фоновый рисунок должным образом, поскольку я переопределяю содержимое блога "background-color"

body {
    background-color: red;
}

.blog {
    background-color: white;
}

При этом, если я попытаюсь использовать тот же подход со следующим кодом, который должен переопределить фон:

.blog {
    -webkit-filter: blur(0px);
    opacity: 1.0;
}

Он все еще размывается по всему окну. Итак, почему возникает такая разногласия?

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

Я использую HTML 5 и CSS 3 с браузером Chrome и Stylus и Bootstrap 3.

[Обновить]

Я не хотел бы использовать дополнительное фоновое изображение - просто хочу, чтобы фон был размыт.

  • 0
    Вы также можете взглянуть на технику Криса Койера для достижения этого эффекта: css-tricks.com/blurry-background-effect
Теги:

3 ответа

3
Лучший ответ

Есть несколько способов сделать это, но все они будут включать одни и те же основные шаги.

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

Вот моя попытка: http://jsfiddle.net/83aBP/

.background {
  height: 100%;
  width: 100%;
  background: url(http://i.imgur.com/Zz5bPNl.png);
  background-size: cover;
  position: fixed;
  -webkit-filter: blur(20px);
  opacity: 0.8;
}

.content {
  position: relative;
  color: white;
  z-index: 10;
}
Поделиться
  • 0
    +1 за фильтр, но вы можете улучшить это, используя псевдоэлементы, чтобы избежать несемантической разметки jsfiddle.net/coma/83aBP/2
  • 0
    Требуется ли для этого дополнительный файл изображения? Можно ли просто добавить эффект размытия? Это похоже на удаление background: url(); не работает ...
Показать ещё 6 комментариев
0

Я использовал этот плагин jQuery в прошлом, и он неплохо работал: http://blurjs.com/ Похоже, это именно то, что вы ищете. Это единственный метод, который я нашел, чтобы размыть контент за фоном.

Если это не то, что вы ищете, дайте мне знать, и я найду подходящее решение.

Поделиться
0

Держите фон в отдельном контейнере, чем тело:

<div id="background"></div>
<div id="body"></div>

Затем вы можете достичь эффекта параллакса iOS 7, применив следующий фильтр к фону:

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

#body {
  color: #fff;
  position: relative;
  z-index: 100; 
  margin:0;
  padding:0;
}
Поделиться

Ещё вопросы

Сообщество Overcoder
Наверх
Меню