我目前正在尝试创建一个测试站点来练习，其中一个是我的背景图像不会居中/并且在我尝试使其响应时不断重复。整个图像也不存在于浏览器中。任何解决方案都会有所帮助。
我试过了 背景尺寸:封面； 背景位置:居中；
它仍然无法正常工作。
body {
font-family: Nunito;
background-image: url(https://images.unsplash.com/photo-1517048676732-d65bc937f952?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=1005f3d059e15847f5b8e818aafe7b51&auto=format&fit=crop&w=2550&q=80);
background-size: cover;
background-position: center;
}
.navbar {
background-color: transparent;
border: 0px;
}
.jumbotron {
color: #C7DB8A;
background-color: transparent;
text-align-last: center;
padding-top: 15%;
}
.jumbotron p {
color: #5E9589;
}<!--lorem: ctrl+shift+L -->
<!--hr styles-->
<!DOCTYPE html>
<html>
<head>
<title>asdfs Home</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
<script src="js/home.js"></script>
<link href="https://use.fontawesome.com/releases/v5.0.6/css/all.css" rel="stylesheet">
<link rel="stylesheet" type="text/css" href="css/home.css">
<link rel="stylesheet" type="text/css" href="css/fa-svg-with-js.css">
<link href="https://fonts.googleapis.com/css?family=Nunito:700" rel="stylesheet">
</head>
<body>
<!--nav-->
<nav class="navbar navbar-default">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-nav-demo" aria-expanded="false">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">ABXCH</a>
</div>
<div class="collapse navbar-collapse" id="bs-nav-demo">
<ul class="nav navbar-nav">
<li><a href="#">
<i class="fas fas fa-home"></i>
Home
</a></li>
<li><a href="#">
<i class="far fa-question-circle"></i>
About
</a></li>
<li><a href="#">
<i class="far fa-handshake"></i>
Contact
</a></li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li><a href="#">
<i class="fas fa-sign-in-alt"></i>
Login
</a></li>
</ul>
</div>
</div>
</nav>
<!--jumbo-->
<div class="container">
<div class="row">
<div class="col-lg-12">
<div class="jumbotron">
<h1>asdfas</h1>
<p>Your Online Insurance Sales Office</p>
<hr>
<p><a class="btn btn-default btn-lg" href="#" role="button">Learn More</a></p>
</div>
</div>
</div>
</div>
</body>
</html>最佳答案
问题不在于background-repeat，而是您面临着背景传播。正如您在下面的屏幕截图中看到的，您的 body 元素没有占据屏幕的整个高度，当我们遇到这种情况时，有一些特殊的背景规则:
正如您在 specification 中所读到的那样:
For documents whose root element is an HTML HTML element or an XHTML html element [HTML]: if the computed value of background-image on the root element is none and its background-color is transparent, user agents must instead propagate the computed values of the background properties from that element’s first HTML BODY or XHTML body child element. The used values of that BODY element’s background properties are their initial values, and the propagated values are treated as if they were specified on the root element. It is recommended that authors of HTML documents specify the canvas background for the BODY element rather than the HTML element.
这意味着背景被传播以覆盖未被body覆盖的区域，因此您拥有重新绘制的背景。为避免此类行为，您可以通过添加 min-height:100vh 或将 background-color 应用到 html 来确保主体占据全屏高度> 元素并保持图像仅覆盖内容部分:
html {
background:white;
}
body {
font-family: Nunito;
background-image: url(https://images.unsplash.com/photo-1517048676732-d65bc937f952?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=1005f3d059e15847f5b8e818aafe7b51&auto=format&fit=crop&w=2550&q=80);
background-size: cover;
background-position: center;
}
.navbar {
background-color: transparent;
border: 0px;
}
.jumbotron {
color: #C7DB8A;
background-color: transparent;
text-align-last: center;
padding-top: 15%;
}
.jumbotron p {
color: #5E9589;
}<!--lorem: ctrl+shift+L -->
<!--hr styles-->
<!DOCTYPE html>
<html>
<head>
<title>asdfs Home</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
<script src="js/home.js"></script>
<link href="https://use.fontawesome.com/releases/v5.0.6/css/all.css" rel="stylesheet">
<link rel="stylesheet" type="text/css" href="css/home.css">
<link rel="stylesheet" type="text/css" href="css/fa-svg-with-js.css">
<link href="https://fonts.googleapis.com/css?family=Nunito:700" rel="stylesheet">
</head>
<body>
<!--nav-->
<nav class="navbar navbar-default">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-nav-demo" aria-expanded="false">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">ABXCH</a>
</div>
<div class="collapse navbar-collapse" id="bs-nav-demo">
<ul class="nav navbar-nav">
<li><a href="#">
<i class="fas fas fa-home"></i>
Home
</a></li>
<li><a href="#">
<i class="far fa-question-circle"></i>
About
</a></li>
<li><a href="#">
<i class="far fa-handshake"></i>
Contact
</a></li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li><a href="#">
<i class="fas fa-sign-in-alt"></i>
Login
</a></li>
</ul>
</div>
</div>
</nav>
<!--jumbo-->
<div class="container">
<div class="row">
<div class="col-lg-12">
<div class="jumbotron">
<h1>asdfas</h1>
<p>Your Online Insurance Sales Office</p>
<hr>
<p><a class="btn btn-default btn-lg" href="#" role="button">Learn More</a></p>
</div>
</div>
</div>
</div>
</body>
</html> 
更多信息的一些相关链接:
What's the meaning of "propagated to the viewport" in the CSS spec?
Applying a background to <html> and/or <body>
https://css-tricks.com/just-one-of-those-weird-things-about-css-background-on-body/
关于javascript - 背景图像不居中/不断重复，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/48858633/