如何将段落移到背景下方？

Question

我有一项 Web 开发任务即将到期。我真的需要帮助将课程信息段落放在 non-repeat 背景下方。我不希望它出现在计算机工程标题所在的同一张图片上。另外，我怎样才能改变它的字体？任何帮助将不胜感激：）。这很快就会到期。

body,
html {
  height: 100%;
  margin: 0;
  font-size: 16px;
  font-family: "Lato", sans-serif;
  font-weight: 400;
  line-height: 1.8em;
}

.jumbotron {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background-image: url(image.jpg);
  background-position: 0% 25%;
  background-size: cover;
  background-repeat: no-repeat;
  border: 2px;
}

.navigation {
  background-color: #330;
  overflow: hidden;
  display: grid;
  grid-template-columns: auto auto auto auto auto;
}

.navigation a {
  font-size: 20px;
  text-decoration: none;
  color: #f2f2f2;
  text-align: center;
  float: left;
}

.navigation a:hover {
  background-color: #dddddd;
  color: black;
}

.navigation a.active {
  background-color: #4CAF50;
  color: white;
}

body {
  background-image: url("Engineering.jpg");
  background-repeat: no-repeat;
  background-position: center top;
  background-size: cover;
  background-color: rgba(0, 0, 0, 0.5);
}

h1 {
  margin: auto;
  z-index: 4;
  text-align: center;
  width: 100%;
  color: white;
  font-size: 100px;
  padding: 10px;
  line-height: 1.8em;
}

.courseinfo {}

<!DOCTYPE html>
<html>

<head>

  <title>
    Home - Hasan's Website
  </title>
</head>

<body>
  <div class="navigation">
    <a class="active" href="#home">Home</a>
    <a href="#aboutMe">About Me</a>
    <a href="#careers">Careers</a>
    <a href="#contactUs">Contact Us</a>
    <a href="#webDev">Web Development</a>
  </div>

  <div class="intro">
    <div class="jumbotron">
      <h1>Computer Engineering</h1>

    </div>


  </div>

  <div class="courseinfo">
    <p>This course examines computer systems and control of external devices. Students will develop knowledge and skills in electronics, interfacing, programming, and networks, will build systems that use computer programs and interfaces to control and respond
      to external devices. Students will develop an awareness of related environmental and societal issues, and will learn about college and university programs leading to careers in computer technology.</p>

  </div>





</body>

</html>

Answer 1

这是你想要的吗..已删除 position:absolute 和 transform: translate(-50%, -50%); 已将背景图片添加到 .intro

body,
html {
  height: 100%;
  margin: 0;
  font-size: 16px;
  font-family: "Lato", sans-serif;
  font-weight: 400;
  line-height: 1.8em;
}

.jumbotron {
  top: 50%;
  left: 50%;
  background-image: url(image.jpg);
  background-position: 0% 25%;
  background-size: cover;
  background-repeat: no-repeat;
  border: 2px;
}

.navigation {
  background-color: #330;
  overflow: hidden;
  display: grid;
  grid-template-columns: auto auto auto auto auto;
}

.navigation a {
  font-size: 20px;
  text-decoration: none;
  color: #f2f2f2;
  text-align: center;
  float: left;
}

.navigation a:hover {
  background-color: #dddddd;
  color: black;
}

.navigation a.active {
  background-color: #4CAF50;
  color: white;
}

.intro {
  background-image: url("Engineering.jpg");
  background-repeat: no-repeat;
  background-position: center top;
  background-size: cover;
  background-color: rgba(0, 0, 0, 0.5);
  height: 90vh;
  display: flex;
  align-items: center;
}

h1 {
  margin: auto;
  z-index: 4;
  text-align: center;
  width: 100%;
  color: white;
  font-size: 100px;
  padding: 10px;
  line-height: 1.8em;
}

.courseinfo {}

<!DOCTYPE html>
<html>

<head>

  <title>
    Home - Hasan's Website
  </title>
</head>

<body>
  <div class="navigation">
    <a class="active" href="#home">Home</a>
    <a href="#aboutMe">About Me</a>
    <a href="#careers">Careers</a>
    <a href="#contactUs">Contact Us</a>
    <a href="#webDev">Web Development</a>
  </div>

  <div class="intro">
    <div class="jumbotron">
      <h1>Computer Engineering</h1>
    </div>
  </div>

  <div class="courseinfo">
    <p>This course examines computer systems and control of external devices. Students will develop knowledge and skills in electronics, interfacing, programming, and networks, will build systems that use computer programs and interfaces to control and respond
      to external devices. Students will develop an awareness of related environmental and societal issues, and will learn about college and university programs leading to careers in computer technology.</p>

  </div>





</body>

</html>

如何将段落移到背景下方？

How can I move the paragraph below the background?

html

css

paragraph