Размытие под текстом в HTML

http://www.webmasters.by/articles/html-coding/1968-css-filters.html

только по собственному опыту. работает нормально исключительно в хроме.

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

Это сделать будет достаточно сложно, но возможно.

Вам нужно создать еще один пустой блок с размерами темной плашки с текстом и поместить его точно под той плашкой с помощью z-index. В качестве фона этого блока необходимо установить фоновое изображение со смещением, чтобы оно точно совпадало по размещению с фоновым изображением родительского блока без швов. Самому блоку также нужно дать размытие:

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

Самой темной плашке необходимо в качестве цвета фона указать rgba(0,0,0,0.8), например. Примерно такая техника использована и в материале по приведенной ранее ссылке: http://jordanhollinger.com/2014/01/29/css-gaussian-blur-behind-a-translucent-box/

Спасибо конечно, но это слишком уж сложно, да и сервер не такой мощный)

Нет кроссбраузерного решения на размытие. Вообще нет пока что! :)

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

Это увеличит время загрузки сайта, причем существенно.