Question

我刚刚开始开发我的第一个Bootstrap动力设计，但我正在努力研究如何创建模糊的背景图像。

这是我的代码：

＆＃13;

  body {
  padding-top: 40px;
  padding-bottom: 40px;

  }

  body::before{
  background: url(/scnet/includes/images/bg.jpg) no-repeat center center fixed; 
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
  -webkit-filter: blur(5px);
  -moz-filter: blur(5px);
  -o-filter: blur(5px);
  -ms-filter: blur(5px);
  filter: blur(5px);
  }

＆＃13;

 <body>
	<div class="container">

      <form class="form-signin">
        <h2 class="form-signin-heading">Please sign in</h2>
        <label for="inputEmail" class="sr-only">Email address</label>
        <input type="text" id="inputUser" class="form-control" placeholder="User ID" data-toggle="tooltip" title="tooltip on second input!" name="secondname" required autofocus>
		<label for="inputPassword" class="sr-only">Memorable Data</label>
        <input type="password" id="inputMem" class="form-control" placeholder="Memorable Data" required>
        <label for="inputPassword" class="sr-only">Password</label>
        <input type="password" id="inputPassword" class="form-control" placeholder="Password" required>
        <button class="btn btn-lg btn-primary btn-block" type="submit">Sign in</button><button class="btn btn-lg btn-primary btn-block" type="submit">Password Reset</button>
      </form>
	  <script type="text/javascript">
	  	$('input[type=text][id=inputEmail]').tooltip({ /*or use any other selector, class, ID*/
	  		placement: "right",
	  		trigger: "focus"
	  	});
	  </script>
    </div> <!-- /container -->

    <!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
    <!-- Include all compiled plugins (below), or include individual files as needed -->
    <script src="includes/js/bootstrap.min.js"></script>
  </body>

＆＃13;

目前没有任何反应（背景保持白色） - 我知道图像引用是正确的，因为我尝试将其添加到body类并且加载正常。

任何想法我做错了什么？

Answer 1

尝试：

body {
  padding-top: 40px;
  padding-bottom: 40px;
  position: relative;
}

body::before {
  background: url(/scnet/includes/images/bg.jpg) no-repeat center center fixed;
  content: '';
  z-index: -1;
  width: 100%;
  height: 100%;
  position:absolute; 
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
  -webkit-filter: blur(5px);
  -moz-filter: blur(5px);
  -o-filter: blur(5px);
  -ms-filter: blur(5px);
  filter: blur(5px);
}

Answer 2

使用Bootstrap，有多种方法可以解决这个问题（包括上面提到的@Garret建议。）如果不了解所有自定义CSS（如果有的话），很难确切地知道你所追求的是什么，但作为替代方案，请查看Bootply上的此代码段。

Bootstrap 3

2 个答案: