Question

所以，我把jumbotron从容器中拿出来，因为我希望它是全宽的。但是，当我将文字应用于jumbotron时，它也会模糊不清。我试着做相反的事情并将我的背景图像放在一个单独的cls @echo off setlocal enabledelayedexpansion set nodeCount=7 set Node1="111.111.111.111:1111" set Node2="222.222.222.222:2222" set Node3="333.333.333.333:3333" set Node4="444.444.444.444:4444" set Node5="555.555.555.555:5555" set Node6="666.666.666.666:6666" set Node7="777.777.777.777:7777" for /L %%C in (1,1,%nodeCount%) do ( echo Node%%C: dashd-cli masternodelist status !Node%%C! )中，但无法像以前那样占据整个空间。想法？

https://facebook.github.io/react-native/docs/linking.html#opening-external-links

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

Answer 1

您可以使用简单的伪类 - 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;来隐藏图像溢出。

Answer 2

一种可能的解决方案是用div替换jumbotron，在其中放置标题，段落和图像：

#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>

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

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

2 个答案: