【发布时间】：2020-03-22 12:14:57
【问题描述】：
作为 HTML 和 CSS 的新用户，我正在尝试将图像显示为带有文本的横幅，但我所测试和测试的所有内容都表明图像不可能，所以我正在使用css的后台工具。但当我试图把它做成横幅时，它只显示图像的上半部分。
Here is the image I'm trying to display
这是我目前拥有的：
一切都很好，包括图像的纵横比，但我想居中在中间，大致是这样的：
我需要更少的云和更多的山脉，如何将背景图像裁剪到中间的中心？
body {
background-size: cover;
background-position: center;
}
body,
html {
width: 100%;
height: 100%;
font-family: "Lato";
color: white;
margin: 0;
padding: 0;
}
h1 {
font-weight: 700;
font-size: 5em;
}
.content {
padding-top: 10%;
text-align: center;
text-shadow: 0px 4px 3px rgba(0, 0, 0, 0.4), 0px 8px 13px rgba(0, 0, 0, 0.1), 0px 18px 23px rgba(0, 0, 0, 0.1);
}
.headerText {
padding-top: 10%;
}
hr {
width: 400px;
border-top: 0.5px solid #f8f8f8;
border-bottom: 1px solid rgba(0, 0, 0, 0.2);
}
p {
color: blue;
}
#banner {
width: 100%;
background: url(https://images.unsplash.com/photo-1571847490051-491c12ff6540?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=2550&q=80) no-repeat center top;
background-size: cover;
}
#banner h4 {
padding-bottom: 100px;
}<html>
<head>
<title>Website Sample Project</title>
<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="css/app.css">
</head>
<body>
<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
<button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#navbarNavDropdown" aria-controls="navbarNavDropdown" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<a><img src="https://via.placeholder.com/100x40"></a>
<ul class="navbar-nav ml-auto">
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="dropdown01" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Locations</a>
<div class="dropdown-menu" aria-labelledby="dropdown01">
<a class="dropdown-item" href="locations/narnia.html">Narnia</a>
<a class="dropdown-item" href="#">Neverland</a>
<a class="dropdown-item" href="#">Somehere</a>
<a class="dropdown-item" href="#">Nowhere</a>
</div>
</li>
<li class="nav-item">
<a class="nav-link" href="#">About</a>
</li>
</ul>
</nav>
<section id="banner">
<div class="container">
<div class="row">
<div class="col-lg-12">
<div class="content">
<a><img src="https://via.placeholder.com/600x160"></a>
<div class="headerText">
<h3>Sample Text</h3>
</div>
<hr>
<h4>Sample Text</h4>
</div>
</div>
</div>
</div>
</section>
<script type="text/javascript" src="https://code.jquery.com/jquery-3.4.1.js"></script>
<script type="text/javascript" src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
</body>
</html>【问题讨论】：
-
相关以获得关于背景位置的所有信息：stackoverflow.com/q/51731106/8620333
标签： html css image bootstrap-4 image-size