CSS - Text with Blurr Background - html

Question

I've been trying for quite a while to achieve the effect of having the background of a text block to be blurred, to be able to have more readability on the text on top of the pictures.
But I keep getting both the background and text blurred. Now this has to be inline css since I have to put it in each entry.
This is what I'm trying
<div style= "background:white; background:rgba(255,255,255,0.5); filter:blur(4px); -o-filter:blur(4px); -ms-filter:blur(4px); -moz-filter:blur(4px); -webkit-filter:blur(4px); z-index: -1; padding: 5px;">
<p style= "z-index: 1;">
Desde hace 17 años Tybso se mantiene fiel a la filosofía de crear piezas únicas hechas 100% a mano pensadas siempre como ese objeto que es capaz de unir y resaltar el modo en que la gente come, vive y celebra alrededor de la comida y la buena cocina!
</p>
</div>
This is the link to see what's happening.

Answer 1

I agree with #Dryden Long, you should try to avoid long styles like this. However, you also have styled the <div> whereas I would recommend you style the <p>. Like:
<div>
<h1>This is not blurry</h1>
<p style= "background:white; background:rgba(255,255,255,0.5); filter:blur(4px); -o-filter:blur(4px); -ms-filter:blur(4px); -moz-filter:blur(4px); -webkit-filter:blur(4px); z-index: -1; padding: 5px;z-index: 1;">
Desde hace 17 años Tybso se mantiene fiel a la filosofía de crear piezas únicas hechas 100% a mano pensadas siempre como ese objeto que es capaz de unir y resaltar el modo en que la gente come, vive y celebra alrededor de la comida y la buena cocina!
</p>
</div>
Here is a fiddle: http://jsfiddle.net/sablefoste/JaazU/1/

Answer 2

Filter operates over a whole div, not just the background.
Try adding this
<p style = "filter:-; -o-filter:-; -ms-filter:-; -moz-filter:-; -webkit-filter:-;">
it worked on this JSFiddle

Answer 3

modifying sable foste's code to make the example jsfiddle, but all you need to do is have two divs, 1 with a blur background and 1 that is normal, and position the normal one over the blur.
http://jsfiddle.net/pW83w/
.blur {background:#e5ffcc; background:rgba(229,255,204,0.5); filter:blur(4px); -o-filter:blur(4px); -ms-filter:blur(4px); -moz-filter:blur(4px); -webkit-filter:blur(4px); z-index: -1; padding: 5px;z-index: 1; height: 5em; width: 20em; position: absolute;}
.noBlur {
font-weight: bold;
z-index: 5;
}