Question

#particles-js{
  background:rgba(0, 10, 14,.8);
  height:100%;
  position: absolute;
  top:55px;
  left:0;
  width:100%;
  min-height:700px;
  background-size: cover;
  background-position: center;
  overflow: hidden;
}

#jumbotron{
  margin: auto;
  width: 700px;
  /* position: fixed; */
  /* z-index:-101; */
  /* height: 100vh; */
}

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min.css" integrity="sha384-/Y6pD6FV/Vv2HJnA6t+vslU6fwYXjCFtcEpHbNJ0lyAFsXTsjBbfaDjzALeQsN6M"
    crossorigin="anonymous">
  <link rel="stylesheet" href="/css/style.css">
  <title>Video</title>
</head>
<body>


<div id="particles-js">
 <div class="jumbotron text-center mt-3" id="jumbotron">
  <h1 class="display-3">Welcome</h1>
  <p class="lead">Jot down ideas for your next YouTube videos</p>
  <a href="" class="btn btn-dark btn-lg">Add Video Idea</a>
</div>
</div>
<script src="https://cdn.jsdelivr.net/particles.js/2.0.0/particles.min.js"></script>
  <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN"
    crossorigin="anonymous"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.11.0/umd/popper.min.js" integrity="sha384-b/U6ypiBEHpOf/4+1nzFpr53nxSS+GLCkfwBdFNTxtclqqenISfwAzpKaMNFNmj4"
    crossorigin="anonymous"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/js/bootstrap.min.js" integrity="sha384-h0AbiXch4ZDo7tp9hKZ4TsHbi047NrKGLO3SEJAg45jXxnGIfYzk4Si90RDIqNm1"
    crossorigin="anonymous"></script>

  <script>
    particlesJS.load('particles-js', 'particles.json', function () {
      console.log('particles.json loaded...');
    });
  </script>
</body>

</html>

我在div内有一个jumbotron，它有一些粒子效果。

从图像中可以看出，这些粒子从超大屏幕下方开始。我怎么能在超大屏幕下方有这些呢？

的index.html

<div id="particles-js">
  <div class="jumbotron text-center mt-3" id="jumbotron">
    <h1 class="display-3">{{title}}</h1>
    <p class="lead">Jot down ideas for your next YouTube videos</p>
    <a href="/ideas/add" class="btn btn-dark btn-lg">Add Video Idea</a>
  </div>
</div>

Style .css

#particles-js {
  background: rgba(0, 10, 14, .8);
  height: 100%;
  position: absolute;
  top: 55px;
  left: 0;
  width: 100%;
  min-height: 700px;
  background-size: cover;
  background-position: center;
  overflow: hidden;
}

#jumbotron {
  margin: auto;
  width: 700px;
  /*position: fixed; */
  /* z-index:-101; */
  /* height: 100vh; */
}

但是如果我使用jumbotron的position:fixed属性，我得到了预期的效果，但是jumbotron移动到页面的最左侧。

我怎么能像第二张照片中央的jumbotron一样？

感谢您的帮助。

Answer 1

我认为问题在于使用粒子js生成的代码。当你将top设置为0时，带背景的＃particles-js div从顶部开始。但是生成的带粒子的代码位于底部。您必须在设置或css中更改此内容。

如何在jumbotron下获得自定义背景？

1 个答案: