使用引导 css 文件时如何模糊文本的背景？

Question

我有以下代码：http://jsfiddle.net/Leytgm3L/，如您所见，我在这里使用扩展资源 - bootstrap.min.css。到目前为止，页面看起来就像这个小提琴的结果。我想改变它，使较暗的背景变得模糊（就像本教程中的 http://jordanhollinger.com/2014/01/29/css-gaussian-blur-behind-a-translucent-box/ 一样）。是否可以不修改引导 css 文件？ 我试图替换这一行：

background: rgba(0, 0, 0, 0.35);

他们在本教程中的建议：

#black{

   -webkit-filter: blur(10px);
    filter: url('/media/blur.svg#blur');
    filter: blur(10px);
}
#black p, #black h1{
padding-left: 10px;
padding-right: 10px;
padding-bottom: 10px
}

但我得到的只是模糊的文字：http://jsfiddle.net/Leytgm3L/1/

你能帮我解决这个问题吗？

Answer 1

您将需要一个空白的“背景”div，它与您希望使用blur 属性和z-index: -1; 的内容的宽度/位置/等相匹配。例如，假设我有一个 300 像素宽和 100 像素高的盒子。我必须制作一个#blurredbackground div，它与添加了filter: blur 和z-index: -1 的宽度、高度和位置相匹配。

HTML：

<div id="blurredbackground></div>
<div id="content">
    ...
</div>

CSS：

#content {
    position: absolute;
    bottom: 72px; left: 72px;
    width: 300px;
    height: 100px;
}    

#blurredbackground {
    position: absolute;    /*matches #content position*/
    bottom: 72px; left: 72px;    /*matches #content position*/
    width: 300px;    /*matches #content width*/
    height: 100px;    /*matches #content height*/
    -webkit-filter: blur(10px);
    filter: blur(10px);
    z-index: -1;
}