Question

我即将完成Web开发任务。我真的需要帮助，将课程信息段落放在不重复的背景下。我不希望它出现在计算机工程标题上的相同2张照片上。另外，我该如何更改字体吗？任何帮助将不胜感激：）。这将很快到期。

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>

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

1 个答案: