CSS размытие фонового изображения

Question

У меня есть этот пример: http://jsfiddle.net/ruchan/8efhk9f5/

Я хочу сделать фон (только) блоков размытым. с помощью filter: blur(5px); делает весь контент вокруг него размытым.

Пробовал использовать его внутри :beforeно все еще не работает

Как мне только размыть фон и оставить содержимое не размытым.

Answer 1

Существует предложенный механизм CSS, чтобы сделать это в черновой версии спецификации фильтров, но он еще не реализован ни в одном браузере (о чем я знаю) (правка: реализован в ночных ночных клубах WebKit, и предположительно в Mobile Safari iOS) 9) Для будущих читателей этого ответа это может быть жизнеспособным решением.

Это выглядит так:

.thing {
  background-image: filter(url('myimage.png'), blur(10px));
}

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

Пример из CSS Tricks, упомянутый в другом ответе, использует псевдоэлемент для создания дубликата элемента, используя тот же фон, а затем размывает его с помощью фильтра. Это должно работать как реалистичное решение сегодня (по крайней мере, для браузеров, которые поддерживают фильтры CSS - не забудьте -webkit- как префикс, так и версию без префикса!), иначе вам придется использовать размытое изображение, созданное вручную.