twitter-bootstrap Bootstrap 3 上的背景图像模糊
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/29897864/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Blurred background-image on Bootstrap 3
提问by Dave Burns
I've just started developing my first Bootstrap powered design but I'm struggling on how to create a blurred background-image.
我刚刚开始开发我的第一个 Bootstrap 驱动设计，但我正在努力研究如何创建模糊的背景图像。
Here's my code:
这是我的代码：
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);
} <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>Currently nothing happens (background stays white) - I know the image reference is correct because I tried add it to bodyclass and it loaded fine.
目前没有任何反应（背景保持白色） - 我知道图像参考是正确的，因为我尝试将其添加到body类中并且加载良好。
Any ideas what I'm doing wrong?
任何想法我做错了什么？
回答by Garrett
Try:
尝试：
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);
}
回答by Jasper33
With Bootstrap, there's a whole variety of ways to approach this (including @Garret's recommendation above.) Without knowing all of your custom CSS (if any) it's hard to know exactly what you're after, but for an alternative, have a look at this code snippet on Bootply.
使用 Bootstrap，有多种方法可以解决这个问题（包括上面@Garret 的建议。）如果不知道所有自定义 CSS（如果有的话），就很难确切地知道你想要什么，但作为替代，看看在Bootply上的这个代码片段。
