我想要一个带有叠加文本的模糊背景图像

Question

因此，我将超大屏幕从容器中取出，因为我希望它是全宽的。但是，当我将文本应用于超大屏幕时，它也会模糊掉。我试着反其道而行之，将我的背景图片放在一个单独的 <div> 中，但无法像以前那样让它占据整个 space。想法？

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>

Answer 1

一个可能的解决方案是用 div 替换超大屏幕，在其中放置标题、段落和图像：

#bg {
  position: absolute;
  height: 100vh;
  background-size: cover;
  background-repeat: no-repeat;
  -webkit-filter: blur(5px);
  filter: blur(5.5px);
  max-width: 100%;
}

#header {
  position: absolute;
  top: 15%;
  width: 100%;
}

#header h1 {
  margin-top: 20%;
}

#header p {
  color: #fff;
  margin-top: 25%;
}

#header p, #header h1 {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  color: #fff;
  z-index: 100;
}

<div id="header">
  <h1> This is my Page! </h1>
  <p> This is an example of what I can do with my newfound knowledge</p>
  <img id="bg" src="http://www.incimages.com/uploaded_files/image/1940x900/software-computer-code-1940x900_35196.jpg">
</div>

您可能需要调整导航的边距和边距。

Answer 2

您可以使用简单的伪 class - 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);，这将使背景略大于容器，因此 'white' 不会向边缘淡出。包装器 .jumbotron 然后有 overflow: hidden; 来隐藏图像溢出。

我想要一个带有叠加文本的模糊背景图像

I want a blurred background image with overlay text

html

css

blur

background-image