css - 如何模糊 bootstrap css 描述的元素？

Question

我创建了一个使用 Bootstrap 框架的网页:http://jsfiddle.net/Leytgm3L/ (添加了扩展资源 bootstrap.min.css)。我想更改它，使较暗的背景变得模糊(就像本教程中的一样 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

在教程中它说，你需要额外的 block ，你将在其上使用模糊滤镜，并且这个 block 必须在下面或者你的 block 有内容:

#search-bg {
  /* Absolutely position it, but stretch it to all four corners, then put it just behind #search's z-index */
  position: absolute;
  top: 0px;
  right: 0px;
  bottom: 0px;
  left: 0px;
  z-index: 99;

  /* Pull the background 70px higher to the same place as #bg's */
  background-position: center -70px;

  -webkit-filter: blur(10px);
  filter: url('/media/blur.svg#blur');
  filter: blur(10px);
}

#search {
  /* Put this on top of the blurred layer */
  position: relative;
  z-index: 100;
  padding: 20px;
  background: rgb(34,34,34); /* for IE */
  background: rgba(34,34,34,0.75);
}