我很快就会完成一项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>这是你想要的..删除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>