时间戳

首页 > 解决方案 > 如何将段落移到背景下方？

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

问题描述

我有一个网络开发任务很快就要到期了。我真的需要帮助将课程信息段落置于非重复背景之下。我不希望它出现在计算机工程标题所在的 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>

标签： htmlcssparagraph

解决方案

这是你想要的方式吗.. 删除 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>

推荐阅读