Question

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

但我一直都在弄清楚背景和文字。现在这必须是内联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>

这是一个小提琴：http://jsfiddle.net/sablefoste/JaazU/1/

Answer 2

过滤器操作整个div，而不仅仅是背景。

尝试添加此

<p style = "filter:-;  -o-filter:-;  -ms-filter:-;  -moz-filter:-;  -webkit-filter:-;">

它适用于此JSFiddle

Answer 3

修改sable foste的代码来制作示例jsfiddle，但你需要做的就是有两个div，1个带有模糊背景，1个是正常的，并将正常位置放在模糊上。

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

CSS - 带模糊背景的文本

3 个答案: