因此，我将超大屏幕从容器中取出，因为我希望它是全宽的。但是，当我将文本应用于超大屏幕时，它也会模糊掉。我试着反其道而行之，将我的背景图片放在一个单独的 <div> 中。但无法像我以前那样让它占据整个空间。想法？
html, body {
height: 100%; width: 100%;
}
.navbar-nav > li {
padding: 0px 25px 0px 40px;
margin: -15px 0px 0px 0px;
top: -25px; right: 30px;
}
.jumbotron {
width: 100%;
}
.jumbotron {
background:url("http://www.incimages.com/uploaded_files/image/1940x900/software-computer-code-1940x900_35196.jpg");
height: 100vh;
background-size: cover;
background-repeat: no-repeat;
-webkit-filter: blur(5px);
filter: blur(5.5px);
width: 100%;
}
p {
color: white;
}<body>
<!-- NAVIGATION BAR -->
<nav role="navigation" class="navbar navbar-default navbar-fixed-top">
<div class="container-fluid">
<div class="navbar header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand text-center">Michael Adamski <br><span class="sub-brand">- Web Developer -</span></a>
</div>
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1" id="navbar-list">
<ul class="nav navbar-nav navbar-right">
<li a href="home" class="active">Home</li>
<li a href="#about">About</li>
<li a href="portfolio">Portfolio</li>
<li a href="Contact">Contact</li>
</ul>
</div>
</div>
</nav>
<!-- End Navigation Bar -->
<!-- Header -->
<div class="jumbotron">
<div class="container">
<h1> This is my Page! </h1>
<p> This is an example of what I can do with my newfound knowledge</p>
</body>最佳答案
你可以用一个简单的伪类来做到这一点 - working fiddle
想法是将背景放入它自己的伪元素中，这样模糊就不会影响 .jumbotron div 的子元素。特别注意 z-index 和位置设置，因为它们将背景放在内容后面。
.jumbotron {
position: relative;
width: 100vw;
height: 100vh;
overflow: hidden;
}
.jumbotron .container {
position: relative;
z-index: 2;
color: #ffffff;
}
.jumbotron:after {
content:"";
position: absolute;
z-index: 1;
top: 0;
left: 0;
right: 0;
bottom: 0;
background:url("http://example.com/linktoimage.jpg");
background-size: cover;
background-repeat: no-repeat;
filter: blur(5.5px);
transform: scale(1.1);
}
另请注意 transform: scale(1.1);，这将使背景略大于容器，因此您不会看到“白色”向边缘淡出。包装器 .jumbotron 然后有 overflow: hidden; 来隐藏图像溢出。
关于html - 我想要一个带有叠加文本的模糊背景图像，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/40052195/