我正在为我的足球队做一个非常基本的网站，并且我有一个Jumbotron背景图片，该图片可以在不同的屏幕尺寸下调整大小-可以正常工作，但是我在Jumbotron之外的屏幕尺寸很小（ 576像素）。
随着屏幕变小，文本只会停留在同一位置，我希望它跟随背景图像。任何想法....代码如下：
html {
background-color: ffff00;
height: 100%;
}
body {
background-color: transparent !important;
font-family: 'nunito' !important;
height: 100%;
}
.site-wrapper {
background-color: 0000ff;
min-height: 100%;
width: 80%;
margin: 0% auto;
}
.container {
background-color: 0000ff;
margin-bottom: 0%;
}
.navbar {
height: auto;
margin: auto;
max-width: 95%;
}
.navbarcenter {
margin: auto;
}
nav .navbar-nav li {
justify-content: space-between !important;
display: inline-block;
float: none;
}
nav .navbar-nav li a {
color: ffff00 !important;
font-size: 1.5rem;
}
.navbar .navbar-brand {
color: ffff00 !important;
font-weight: bold;
font-size: 1.5rem;
}
html body .container .jumbotron {
min-width: 90%;
height: 85%;
background-image: url(https://imgur.com/wzo1pmU.jpg);
background-size: cover;
background-repeat: no-repeat;
padding: 3%;
background-color: 0000ff;
}
.responsive {
color: 0000ff;
}
.responsive-small {
color: 0000ff;
margin-bottom: 0%;
}
@media(max-width:568px) {
.navbar {
margin-bottom: 5%;
}
p {
color: transparent;
}
html body .container .jumbotron {
background-image: url(https://imgur.com/QYDb3BF.jpg);
background-size: contain;
height: 45%;
padding-bottom: 0%;
margin-bottom: 0%;
}
.responsive {
color: ffff00;
width: 90%;
margin: 0 auto;
font-size: 1rem;
text-align: center;
padding-top: 0%;
}
.responsive-small {
color: ffff00;
width: 90%;
margin: 0 auto;
font-size: 0.75rem;
text-align: center;
margin-top: 2.5%;
}
}
@media (max-width: 767px) {
html body .container .jumbotron {
max-height: 55%;
min-width: 100%;
}
p {
font-size: 0.75rem;
}
p.lead {
font-size: 1rem;
margin-bottom: 0%;
}
}
@media (min-width: 768px) {
.container {
padding-bottom: 1.7%;
}
html body .container .jumbotron {
min-width: 60%;
max-height: 65%;
}
p.lead {
margin-bottom: 1.5%;
}
}
@media (min-width: 992px) {
html body .container .jumbotron {
min-width;
60%;
min-height: 80%;
}
.container .jumbotron p.lead {
margin-top: 0.25rem;
}
p {
font-size: 1rem;
}
p.lead {
font-size: 1.25rem;
}
}
@media (min-width: 1200px) {}<html>
<head>
<title>Ansty FC Home Page</title>
<link rel="stylesheet" type="text/css" href="Home.css">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
<link href="https://fonts.googleapis.com/css?family=Nunito:400,700" rel="stylesheet">
</head>
<body>
<div class="site-wrapper">
<nav class="navbar navbar-expand-lg navbar-dark navbar-fixed-top">
<div class="d-flex flex-grow-1">
<span class="w-100 d-lg-none d-block"> <!-- hidden spacer to center brand on mobile --></span>
<a class="navbar-brand d-none d-lg-inline-block d-lg-none d-inline-block" href="#">Ansty FC</a>
<div class="w-100 text-right">
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#myNavbar">
<span class="navbar-toggler-icon"></span>
</button>
</div>
</div>
<div class="collapse navbar-collapse flex-grow-1 text-right" id="myNavbar">
<ul class="navbar-nav ml-auto flex-nowrap">
<li class="nav-item">
<a href="#" class="nav-link m-2 menu-item nav-active">Training</a>
</li>
<li class="nav-item">
<a href="#" class="nav-link m-2 menu-item">Committee</a>
</li>
<li class="nav-item">
<a href="#" class="nav-link m-2 menu-item">Kit</a>
</li>
<li class="nav-item">
<a href="#" class="nav-link m-2 menu-item">Contact Us</a>
</li>
</ul>
</div>
</nav>
<div class="container">
<div class="jumbotron mx-auto col-sm-12 col-md-12 col-lg-10">
<p class="lead">Ansty Sports and Social FC, Setting the Mid Sussex League alight with flair, passion and glory. </p>
<p>Divisions 1, and 4 South in the Mid Sussex Football League.</p>
</div>
</div>
<p class="responsive">Ansty Sports and Social FC, Setting the Mid Sussex League alight with flair, passion and glory. </p>
<p class="responsive-small">Divisions 1, and 4 South in the Mid Sussex Football League.</p>
</div>
</body>
</html>
答案 0 :(得分：0)
请查看CSS部分中的注释代码
html {
background-color: ffff00;
height: 100%;
}
body {
background-color: transparent !important;
font-family: 'nunito' !important;
height: 100%;
}
.site-wrapper {
background-color: 0000ff;
min-height: 100%;
width: 80%;
margin: 0% auto;
}
.container {
background-color: 0000ff;
margin-bottom: 0%;
}
.navbar {
height: auto;
margin: auto;
max-width: 95%;
}
.navbarcenter {
margin: auto;
}
nav .navbar-nav li {
justify-content: space-between !important;
display: inline-block;
float: none;
}
nav .navbar-nav li a {
color: ffff00 !important;
font-size: 1.5rem;
}
.navbar .navbar-brand {
color: ffff00 !important;
font-weight: bold;
font-size: 1.5rem;
}
html body .container .jumbotron {
min-width: 90%;
height: 85%;
background-image: url(https://imgur.com/wzo1pmU.jpg);
background-size: cover;
background-repeat: no-repeat;
padding: 3%;
background-color: 0000ff;
}
.responsive {
color: 0000ff;
}
.responsive-small {
color: 0000ff;
margin-bottom: 0%;
}
@media(max-width:568px) {
.navbar {
margin-bottom: 5%;
}
html body .container .jumbotron {
background-image: url(https://imgur.com/QYDb3BF.jpg);
height: 45%;
padding-bottom: 0%;
margin-bottom: 0%;
}
.responsive {
color: ffff00;
width: 90%;
margin: 0 auto;
font-size: 1rem;
text-align: center;
padding-top: 0%;
}
.responsive-small {
color: ffff00;
width: 90%;
margin: 0 auto;
font-size: 0.75rem;
text-align: center;
margin-top: 2.5%;
}
}
@media (max-width: 767px) {
html body .container .jumbotron {
max-height: 55%;
min-width: 100%;
}
p {
font-size: 0.75rem;
}
p.lead {
font-size: 1rem;
margin-bottom: 0%;
}
}
@media (min-width: 768px) {
.container {
padding-bottom: 1.7%;
}
html body .container .jumbotron {
min-width: 60%;
max-height: 65%;
}
p.lead {
margin-bottom: 1.5%;
}
}
@media (min-width: 992px) {
html body .container .jumbotron {
min-width;
60%;
min-height: 80%;
}
.container .jumbotron p.lead {
margin-top: 0.25rem;
}
p {
font-size: 1rem;
}
p.lead {
font-size: 1.25rem;
}
}
@media (min-width: 1200px) {}
/* Drop this rules from your code to saw the same efect for small screens */
/*
@media(max-width:568px) {
p { // to show text
color: transparent;
}
html body .container .jumbotron {
background-size: contain; // to apply styles the same as for other resolutions
}
}
*/<html>
<head>
<title>Ansty FC Home Page</title>
<link rel="stylesheet" type="text/css" href="Home.css">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
<link href="https://fonts.googleapis.com/css?family=Nunito:400,700" rel="stylesheet">
</head>
<body>
<div class="site-wrapper">
<nav class="navbar navbar-expand-lg navbar-dark navbar-fixed-top">
<div class="d-flex flex-grow-1">
<span class="w-100 d-lg-none d-block"> <!-- hidden spacer to center brand on mobile --></span>
<a class="navbar-brand d-none d-lg-inline-block d-lg-none d-inline-block" href="#">Ansty FC</a>
<div class="w-100 text-right">
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#myNavbar">
<span class="navbar-toggler-icon"></span>
</button>
</div>
</div>
<div class="collapse navbar-collapse flex-grow-1 text-right" id="myNavbar">
<ul class="navbar-nav ml-auto flex-nowrap">
<li class="nav-item">
<a href="#" class="nav-link m-2 menu-item nav-active">Training</a>
</li>
<li class="nav-item">
<a href="#" class="nav-link m-2 menu-item">Committee</a>
</li>
<li class="nav-item">
<a href="#" class="nav-link m-2 menu-item">Kit</a>
</li>
<li class="nav-item">
<a href="#" class="nav-link m-2 menu-item">Contact Us</a>
</li>
</ul>
</div>
</nav>
<div class="container">
<div class="jumbotron mx-auto col-sm-12 col-md-12 col-lg-10">
<p class="lead">Ansty Sports and Social FC, Setting the Mid Sussex League alight with flair, passion and glory. </p>
<p>Divisions 1, and 4 South in the Mid Sussex Football League.</p>
</div>
</div>
<p class="responsive">Ansty Sports and Social FC, Setting the Mid Sussex League alight with flair, passion and glory. </p>
<p class="responsive-small">Divisions 1, and 4 South in the Mid Sussex Football League.</p>
</div>
</body>
</html>