Question

我创建了一个使用bootstrap框架的网页：http://jsfiddle.net/Leytgm3L/（添加了扩展资源bootstrap.min.css）。我想改变它，使深色背景模糊（就像在本教程http://jordanhollinger.com/2014/01/29/css-gaussian-blur-behind-a-translucent-box/中一样）。如果不修改bootstrap css文件，我怎么能这样做？我试图替换这一行：

df <- structure(list(transect_id = structure(c(1L, 1L, 1L, 1L, 1L, 
1L), .Label = "TR001", class = "factor"), year = c(2010L, 2010L, 
2010L, 2010L, 2010L, 2011L), day = c(191L, 191L, 191L, 191L, 
191L, 191L), month = c(4L, 4L, 5L, 7L, 7L, 7L), LST = c(30.62083, 
30.62083, 30.62083, 30.62083, 30.62083, 30.62083), precipitation = c(0, 
3e-04, 1e-04, 0, 0, 7e-04)), .Names = c("transect_id", "year", 
"day", "month", "LST", "precipitation"), row.names = c("1", "2", 
"3", "4", "5", "6"), class = "data.frame")

他们在本教程中的建议：

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

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

你可以帮帮我吗？

Answer 1

在教程中它说，你需要额外的块来使用模糊滤镜，这个块必须在下面或你的块内容：

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

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

1 个答案: