html - CSS - 具有模糊背景的文本

Question

我已经尝试了很长一段时间来实现使文本 block 的背景模糊的效果，以便能够使图片顶部的文本更具可读性。

但我总是把背景和文字弄得模糊不清。现在这必须是内联 css，因为我必须将它放在每个条目中。

这就是我想要的

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

这是 link to see what's happening .

Answer 1

我同意@Dryden Long，你应该尽量避免像这样的长样式。但是，您还设置了 <div> 的样式。而我建议您设计 <p> .喜欢:

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

这是一个 fiddle :http://jsfiddle.net/sablefoste/JaazU/1/