html - 如何在使用 bootstrap css 文件时模糊文本的背景？

Question

我有以下代码:http://jsfiddle.net/Leytgm3L/如您所见，我在这里使用扩展资源 - bootstrap.min.css。到目前为止，页面看起来像这个 fiddle 的结果。我想更改它，使较暗的背景变得模糊(就像本教程中的一样 http://jordanhollinger.com/2014/01/29/css-gaussian-blur-behind-a-translucent-box/ )。是否可以不修改 bootstrap 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;
}